Wireframing For UI / UX Designers from Udemy

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

What's inside

Syllabus

Paper Wireframes

What is wireframing

Resources for paper wireframing

Wireframe elements

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

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

Show steps

Understand core usability principles to inform your wireframing decisions.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

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

Show steps

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

Show steps

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

Show steps

Gain a deeper understanding of user-centered design principles to inform your wireframing process.

View Things That Make Us Smart: Defending Human... on Amazon

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

Show steps

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

Show steps

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

Show steps

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.

See salaries and explore the career path for 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.

See salaries and explore the career path for User Interface Designer

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.

See salaries and explore the career path for User Experience Designer

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.

See salaries and explore the career path for 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.

See salaries and explore the career path for 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.

See salaries and explore the career path for Mobile App Designer

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.

See salaries and explore the career path for Information Architect

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.

See salaries and explore the career path for UI Developer

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.

See salaries and explore the career path for Usability Analyst

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.

See salaries and explore the career path for UX Researcher

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.

See salaries and explore the career path for 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.

See salaries and explore the career path for Conversion Rate Optimizer

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.

See salaries and explore the career path for Web Content Strategist

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.

See salaries and explore the career path for Accessibility Specialist

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.

See salaries and explore the career path for Project Manager

Wireframing For UI / UX Designers

What's inside

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses