We may earn an affiliate commission when you visit our partners.
Aleksandar Cucukovic

Wireframes are important part of any design process because they are the bridge between the idea and the execution.

They are great because they are simple enough so everybody involved can understand them, and also cheap enough because you can create them on the piece of paper or majority of design software.

Hi there my name is Alex and in this course you will learn:

Read more

Wireframes are important part of any design process because they are the bridge between the idea and the execution.

They are great because they are simple enough so everybody involved can understand them, and also cheap enough because you can create them on the piece of paper or majority of design software.

Hi there my name is Alex and in this course you will learn:

  • What are wireframes

  • How to draw wireframes on paper and use the templates i provided

  • How to create wireframes in different online tools

  • How to create them in Photoshop

  • And finally, how to create them in Adobe Xd and then move on to high fidelity wireframes and prototypes.

This course is for anybody interested in wireframes and you don't have to know how to use these tools, we are going to cover them in this course.

So if you want to improve your productivity, save a lot of time and money on iterations and create products faster, then click enroll and i'll see you in the course.

Have a creative day.

Alex

Enroll now

What's inside

Syllabus

Paper Wireframes
What is wireframing
Resources for paper wireframing
Wireframe elements
Read more
Wireframe Styles
Printable Templates
Drawing your wireframe
Digital Wireframes
Digital Wireframing Tools
Tool 1
Tool 2
Tool 3
Tool 4
Wireframing In Adobe Photoshop
Wireframing in Adobe Xd
Taking Your Wireframes Further
Exporting Assets From Adobe Xd
Working With Templates
Conclusion
Conclusion And Resources
YouTube Channel For More Content
Join My Free Facebook Group

Save this course

Save Wireframing For UI / UX Designers to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Wireframing For UI / UX Designers with these activities:
Review 'Don't Make Me Think' by Steve Krug
Understand core usability principles to inform your wireframing decisions.
Show steps
  • Read 'Don't Make Me Think' focusing on usability heuristics.
  • Take notes on key takeaways and examples.
  • Reflect on how these principles apply to wireframing.
Practice basic drawing skills
Improve your ability to quickly sketch ideas on paper, a crucial skill for paper wireframing.
Browse courses on Sketching
Show steps
  • Practice drawing basic shapes and lines.
  • Sketch simple UI elements like buttons and forms.
  • Try sketching existing website layouts from memory.
Wireframe a simple app on paper
Apply the concepts learned in the course by creating a paper wireframe for a familiar app.
Show steps
  • Choose a simple app you use regularly.
  • Identify the core user flows within the app.
  • Sketch the key screens for each user flow on paper.
  • Annotate your wireframes with notes and explanations.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Read 'The Design of Everyday Things' by Don Norman
Gain a deeper understanding of user-centered design principles to inform your wireframing process.
Show steps
  • Read 'The Design of Everyday Things' focusing on design principles.
  • Take notes on key concepts and examples.
  • Reflect on how these principles apply to UI/UX design.
Explore advanced Adobe XD features
Deepen your understanding of Adobe XD by exploring advanced features beyond the basics covered in the course.
Show steps
  • Find tutorials on features like components and states.
  • Follow the tutorials to create interactive prototypes.
  • Experiment with different features and techniques.
Write a blog post about wireframing
Solidify your understanding of wireframing by explaining the concepts in your own words.
Show steps
  • Choose a specific aspect of wireframing to focus on.
  • Research the topic and gather relevant information.
  • Write a clear and concise blog post.
  • Include examples and visuals to illustrate your points.
Create a wireframe portfolio
Showcase your wireframing skills by creating a portfolio of your best work.
Show steps
  • Select 3-5 of your best wireframing projects.
  • Write a brief description of each project.
  • Present your wireframes in a visually appealing format.
  • Publish your portfolio online.

Career center

Learners who complete Wireframing For UI / UX Designers will develop knowledge and skills that may be useful to these careers:
Product Designer
The product designer is involved in the entire lifecycle of a product, from ideation to launch. As product designer, you are concerned with understanding user needs and creating solutions that meet those needs. This course helps build a foundation as it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Learning the basics of wireframing is important for you to succeed as a product designer.
User Interface Designer
The user interface designer focuses on the visual elements of a digital product. As a user interface designer, you are concerned with how a product looks and feels. This course may be useful because it covers the basics of wireframing, which is an essential part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. The course also discusses how to take your wireframes further by exporting assets from Adobe XD.
User Experience Designer
The user experience designer focuses on the overall experience a user has with a digital product. As a user experience designer, you are concerned with how easy and enjoyable it is to use a product. This course helps build a foundation as it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Taking this course introduces you to exporting assets from Adobe XD.
Interaction Designer
The interaction designer focuses on how users interact with a digital product. As an interaction designer, you are concerned with designing intuitive and efficient interfaces. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Also, the course may be useful as it discusses how to take your wireframes further by exporting assets from Adobe XD. Learning about wireframes helps you as an aspiring interaction designer.
Web Designer
The web designer focuses on the visual appearance and layout of websites. As a web designer, you are concerned with creating attractive and user-friendly websites. This course helps build a foundation in the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. The course also discusses how to take your wireframes further by exporting assets from Adobe XD. This will be useful as a first step to becoming a web designer.
Mobile App Designer
The mobile app designer focuses on the design and usability of mobile applications. As a mobile app designer, you are concerned with creating engaging and intuitive mobile experiences. This course may be useful because it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. It also discusses how to take your wireframes further by exporting assets from Adobe XD. This course can help get you started in mobile app design.
Information Architect
The information architect focuses on organizing and structuring information within a digital product. As an information architect, you are concerned with creating clear and intuitive navigation systems. This course may be useful because it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Wireframing can help you visualize and test different information architectures before implementation.
UI Developer
The user interface developer translates designs into code. As a user interface developer, you are concerned with implementing user interfaces and ensuring they function correctly. This course may be useful because it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. This allows you to better understand the designs you are implementing and how they should look and feel.
Usability Analyst
The usability analyst evaluates the usability of digital products. As a usability analyst, you are concerned with identifying usability issues and recommending improvements. This course helps build a foundation as it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Also, the course discusses how to take your wireframes further by exporting assets from Adobe XD. Learning more about usability analysis builds your expertise.
UX Researcher
The user experience researcher focuses on understanding user behavior and needs. As a user experience researcher, you are concerned with conducting user research and gathering insights to inform design decisions. The course teaches the basics of wireframing, which is an important part of the design process. As user experience researcher, this course helps you to collaborate with designers and understand how wireframes are used to test and iterate on design concepts.
Digital Strategist
The digital strategist develops and implements digital strategies for organizations. As a digital strategist, you are concerned with understanding the digital landscape and identifying opportunities for growth. This course may be useful because it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Knowing more about digital design empowers you as a digital strategist.
Conversion Rate Optimizer
The conversion rate optimizer focuses on improving the percentage of website visitors who complete a desired action. As a conversion rate optimizer, you are concerned with analyzing website data and implementing changes to improve conversions. This course may be useful as it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. This understanding helps you visualize and test changes to improve conversion rates.
Web Content Strategist
The web content strategist focuses on planning and managing website content. As a web content strategist, you are concerned with ensuring that content is relevant, engaging, and user-friendly. This course may be useful, because it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. The course also discusses how to take your wireframes further by exporting assets from Adobe XD. Learning more about visual representation of website content boosts your understanding.
Accessibility Specialist
The accessibility specialist ensures that digital products are accessible to people with disabilities. As an accessibility specialist, you are concerned with adhering to accessibility standards and guidelines. As an accessibility specialist, the ideas of wireframing are fundamental to your work, and this course will help you build your foundation. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. Having familiarity is going to be useful for your career trajectory.
Project Manager
The project manager is responsible for planning, executing, and closing projects. As a project manager, you are concerned with managing resources, timelines, and budgets. This course may be useful because it covers the basics of wireframing, which is an important part of the design process. The course teaches how to create wireframes on paper and in various online tools, including Photoshop and Adobe XD. By understanding wireframes, you can better communicate with designers and developers and manage the design process more effectively.

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Wireframing For UI / UX Designers.
Classic in the field of usability and user experience. It provides a foundational understanding of how users interact with websites and applications. Reading this book before the course will help you understand the principles behind effective wireframing and design. It's a highly recommended read for anyone serious about UI/UX.
Explores the principles of good design and how to avoid common design flaws. It provides a deeper understanding of user-centered design, which is essential for creating effective wireframes. While not directly about wireframing, it provides a strong theoretical foundation. This book is more valuable as additional reading to deepen your understanding of design principles.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser