We may earn an affiliate commission when you visit our partners.
Angelo Paolillo
In this 2 hours long guided project you will learn how to create an e-commerce web UI wireframe using Pencil Project. You will create a user interaction and navigation flowchart, sketch re-usable items like header and navigation, group and arrange them into private collections, create home and product page, design dialogue and error messages, link the elements and finally export the prototype in an image, PDF or clickable interactive web format.
Register for this course and see more details by visiting:
OpenCourser.com/course/j0cm5v/draw
Here's a deal for you
Save money when you learn with a deal that may be relevant to this course.
All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Get offer
What's inside
Syllabus
Traffic lights
Traffic lights
Read about what's good
what should give you pause and
possible dealbreakers
Thoroughly examines user interaction design, which is standard in web development
Guides learners through designing re-usable elements and navigation, which are core UI design principles
Teaches e-commerce UI design concepts, which are highly relevant in the tech industry
Provides hands-on practice with real-world UI design principles and tools
Projects include exporting prototypes in a variety of formats, which is useful for different situations
Taught by Angelo Paolillo, an industry expert in UI design
Save this course
Create your own learning path.
Save this course to your list so you can find it easily later.
Save
Save
Reviews summary
Wireframing with pencil project
According to students, this course offers a clear and concise introduction to creating e-commerce web UI wireframes using Pencil Project. Learners praise the step-by-step instructions and the instructor's clear explanations, making it an excellent choice for absolute beginners. The practical, hands-on approach is highly valued, quickly guiding users through creating user flowcharts, reusable elements, and exporting prototypes. However, a significant number of learners point out that Pencil Project itself is outdated and that its limitations and occasional bugs may detract from the overall learning experience for those seeking modern wireframing techniques. While the course delivers on its promise to teach the specific tool, its relevance for general wireframing skills is sometimes questioned.
Useful for learning Pencil Project specifically, less for general modern wireframing.
"It's a bit basic if you already know wireframing, but excellent for getting started with this specific tool."
"This course delivered precisely what I needed for an old work project."
"While the course content is clear, the tool choice makes it less relevant today for many scenarios."
"It's great for understanding the basics of wireframing, especially with this specific tool."
Ideal for new learners seeking hands-on experience with wireframing.
"A very useful project for beginners wanting to quickly grasp wireframing using Pencil Project."
"Absolutely fantastic for a guided project. I learned to create a wireframe from scratch, including user flows..."
"Good course, practical and straight to the point."
"I appreciate how hands-on the projects are; they were the strongest part of the course for me."
The course provides excellent, easy-to-follow guidance for wireframing.
"The instructor explains each step clearly and the project is easy to follow."
"The step-by-step instructions were perfect."
"The instructor guides me well through creating the UI elements and the flowchart."
"The examples were very clear and easy to replicate, which helped me immensely."
The pace might be too slow for those with prior UI/UX knowledge.
"I found the pace a bit too slow at times, especially for someone who has some basic UI/UX knowledge."
"For experienced designers, the content might feel a bit drawn out."
"I already knew some UI/UX basics, so I sometimes wished the course moved faster."
Pencil Project is perceived as old, impacting the course's modern relevance.
"I felt the tool itself is a bit outdated compared to modern options like Figma or Adobe XD."
"I wouldn't recommend this course if you're looking for modern wireframing techniques. Pencil Project feels very old..."
"The software is too old and buggy. The course is fine, but the tool presented is a major drawback."
"I spent more time troubleshooting Pencil Project than actually learning during this course."
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 Draw a wireframe in Pencil Project with these
activities:
Compile Notes and Resources
Show steps
Gather course materials, notes, and resources to prepare for the upcoming UI wireframing course.
Browse courses on
Wireframing
Show steps
-
Review course syllabus and instructor bio
-
Create digital folders for course materials
-
Set aside time for note-taking
Design a Basic E-commerce Web Page Wireframe
Show steps
Apply your wireframing skills to create a basic e-commerce web page wireframe, strengthening your understanding of the process.
Show steps
-
Gather inspiration and references
-
Sketch out the layout and structure
-
Create the wireframe using Pencil Project
Attend a UI/UX Design Workshop
Show steps
Deepen your understanding of UI/UX design principles and wireframing techniques by attending a dedicated workshop.
Browse courses on
User Experience Design
Show steps
-
Research and identify relevant workshops
-
Register and prepare for the workshop
-
Actively participate and take notes
Show all three activities
Compile Notes and Resources
Show steps
Gather course materials, notes, and resources to prepare for the upcoming UI wireframing course.
Browse courses on
Wireframing
Show steps
Show steps
Show steps
- Review course syllabus and instructor bio
- Create digital folders for course materials
- Set aside time for note-taking
Design a Basic E-commerce Web Page Wireframe
Show steps
Apply your wireframing skills to create a basic e-commerce web page wireframe, strengthening your understanding of the process.
Show steps
Show steps
Show steps
- Gather inspiration and references
- Sketch out the layout and structure
- Create the wireframe using Pencil Project
Attend a UI/UX Design Workshop
Show steps
Deepen your understanding of UI/UX design principles and wireframing techniques by attending a dedicated workshop.
Browse courses on
User Experience Design
Show steps
Show steps
Show steps
- Research and identify relevant workshops
- Register and prepare for the workshop
- Actively participate and take notes
Show all three activities
Career center
Learners who complete Draw a wireframe in Pencil Project will develop knowledge and skills
that may be useful to these careers:
UX Designer
UX Designer
UX Designers focus on the user experience of websites and applications. They research user needs, create user flows, and design interfaces that are both usable and enjoyable. This course can help UX Designers learn how to use Pencil Project to create wireframes, which are essential for visualizing and communicating design ideas. The course also covers topics such as creating prototypes and gathering feedback, which are essential for improving the user experience.
UI Designer
UI Designer
UI Designers create the visual interfaces for websites and applications. They collaborate with UX designers to ensure that interfaces are both visually appealing and easy to use. This course can help UI Designers learn how to use Pencil Project to create wireframes, which are essential for planning the layout and functionality of an interface. The course also covers topics such as creating user flows and linking elements, which are critical for creating user-friendly experiences.
Interaction Designer
Interaction Designer
Interaction Designers focus on the interactions between users and digital products. They design gestures, animations, and other elements that make digital products more engaging and intuitive. This course can help Interaction Designers learn how to use Pencil Project to create wireframes, which can help them to visualize and communicate their design ideas. The course also covers topics such as creating user flows and prototypes, which can help Interaction Designers to create more effective and engaging digital products.
Product Designer
Product Designer
Product Designers are responsible for the overall design and development of digital products. They work with UI and UX designers, engineers, and other stakeholders to create products that meet the needs of users. This course can help Product Designers learn how to use Pencil Project to create wireframes, which can help them to visualize and communicate their design ideas. The course also covers topics such as creating user flows and prototypes, which can help Product Designers to create more effective and engaging digital products.
Information Architect
Information Architect
Information Architects design and organize the structure and content of websites, intranets, and other digital environments. They work with UI and UX designers to create information systems that are easy to navigate and use.
Web Developer
Web Developer
Web Developers are responsible for developing and maintaining websites and applications. They work with UI and UX designers to implement designs and ensure that websites and applications function properly. This course can help Web Developers learn how to use Pencil Project to create wireframes, which can help them to better understand the design of a website or application before they begin coding. The course also covers topics such as creating prototypes and linking elements, which can help Web Developers to create more efficient and effective websites and applications.
Software Developer
Software Developer
Software Developers design, develop, and maintain computer software. They work with UI and UX designers to create software that is both functional and user-friendly.
Technical Writer
Technical Writer
Technical Writers create instruction manuals, technical reports, and other documentation to explain complex technical information. They use clear and concise language to help users understand how to use products or services.
Customer Success Manager
Customer Success Manager
Customer Success Managers ensure that customers are satisfied with products and services. They work with UI and UX designers to create customer support materials that are both helpful and easy to use.
Quality Assurance Analyst
Quality Assurance Analyst
Quality Assurance Analysts test software to identify and fix bugs. They work with UI and UX designers to ensure that software is both functional and user-friendly.
Project Manager
Project Manager
Project Managers plan and execute projects to achieve specific goals. They work with UI and UX designers to ensure that projects are completed on time and within budget.
Business Analyst
Business Analyst
Business Analysts analyze business needs and develop solutions to improve business processes. They work with UI and UX designers to ensure that solutions are both effective and user-friendly.
Marketing Manager
Marketing Manager
Marketing Managers develop and execute marketing campaigns to promote products and services. They work with UI and UX designers to create marketing materials that are both visually appealing and effective.
Sales Manager
Sales Manager
Sales Managers lead sales teams and develop sales strategies to achieve sales goals. They work with UI and UX designers to create sales materials that are both persuasive and effective.
Graphic Designer
Graphic Designer
Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. They develop the overall layout and production design for various applications such as brochures, magazines, and corporate reports.
For more career information including salaries, visit:
OpenCourser.com/course/j0cm5v/draw
Reading list
We've selected ten 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
Draw a wireframe in Pencil Project.
Emphasizes the importance of sketching and rapid prototyping in the design process.
Provides a foundation for understanding information architecture and its role in designing websites.
Offers practical advice on how to improve the usability of websites and applications.
Introduces the fundamental principles of user experience design.
Provides a beginner-friendly introduction to web design concepts and principles.
Covers the fundamentals of responsive web design and how to create websites that adapt to different screen sizes.
Save
Explores the specific challenges and considerations of designing user experiences for mobile devices.
Provides a comprehensive overview of user experience design principles.
Offers a foundational understanding of design principles and their application in everyday objects.
Save
Covers the principles of typography and how to use type effectively in design.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/j0cm5v/draw
Share
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