Design Responsive Websites with Invision Studio from Udemy

In this course you will have an immersive experience in the Web Design world and learn how professional Web Designers create stunning websites and mobile apps.

It all starts with the right tools. You could use Photoshop or even Canva to design a website, but that wouldn't be very efficient. Once you learn how to use a program made specifically for Web Design, you'll notice the difference in terms of productivity and the quality of the end result. This course will make you master Invision Studio and take your projects to the next level .

You'll learn everything including the basic and advanced tools of Invision Studio, the measurements for responsive design for Desktop, Mobile and Tablet, how to work with the 12-column grid for pixel perfection, what are the common elements of Web Design, how to export the prototype so Web Developers can start working immediately on your design, how to create interactions and how to work with components for high productivity.

Additionally, we are going to cover important topics like design principles and web design fundamentals that will teach you how to create great pieces of web design that look modern and elegant.

If you need some inspiration to get started with your first projects, we've got you covered. There are lessons fully dedicated to teaching you where to find assets to complement your design projects and what are the best websites to find inspiration from the most talented Web Designers in the world.

You'll also learn many tips for productivity and best practices to save you time and keep your Web Design process fast and organized.

If you want to learn the secrets of Web Design and how professionals create great looking web pages and apps, you cannot miss this course. Enroll now and start learning today.

What's inside

Learning objectives

Design modern and elegant websites
Responsive web design with12-column grids
Graphic & web design principles
Web design and ux fundamentals

Master invision studio for professional use
Design websites and mobile apps
Export prototypes with all css available for web developers

Design modern and elegant websites
Responsive web design with12-column grids
Graphic & web design principles
Web design and ux fundamentals
Master invision studio for professional use
Design websites and mobile apps
Export prototypes with all css available for web developers

Syllabus

Introduction

Download Invision Studio

The Basic Elements: Shapes, Text, Images, etc.

Working With 12 Column Grids

Importing Fonts to Invision Studio

Working With Images

Adding Text to The Hero Section

Adding a Call to Action

Working with Components

Creating the Product Box Component

Creating the Product Box Component (Part 2)

* To be continued *

More on Components

Footer Design

Working with SVGs

Exporting Your Prototype

Responsive Web Design

Setting up the responsive artboards

Designing the mobile version

The mobile hero section

The mobile products area

The mobile product slider

The mobile footer design

The mobile inner header menu

The tablet topbar

The tablet hero section

The tablet product slider

The Tablet Footer

Instructions to the Web Developer

Useful Tips

Where to find inspiration

Choosing the Right Colors

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 Design Responsive Websites with Invision Studio with these activities:

Review UX/UI Design Principles

Show steps

Reinforce your understanding of fundamental UX/UI design principles to create more effective and user-friendly website designs in Invision Studio.

Show steps

Review articles and videos on UX/UI design principles.
Identify examples of good and bad UX/UI in existing websites.
Summarize key principles and how they apply to web design.

Review 'Don't Make Me Think' by Steve Krug

Show steps

Understand core usability principles to inform your design decisions in Invision Studio and create user-friendly websites.

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

Show steps

Read 'Don't Make Me Think' by Steve Krug.
Take notes on key usability principles.
Apply these principles to your Invision Studio projects.

Recreate Website Sections from Dribbble

Show steps

Sharpen your Invision Studio skills by replicating visually appealing website sections from Dribbble, focusing on pixel-perfect accuracy and attention to detail.

Show steps

Find inspiring website sections on Dribbble.
Analyze the design elements and layout.
Recreate the section in Invision Studio.
Compare your recreation to the original and refine your design.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Create a Web Design Style Guide

Show steps

Solidify your understanding of design principles and best practices by creating a comprehensive style guide for web design.

Show steps

Research web design style guides.
Define your target audience and design goals.
Document your design choices, including typography, color palettes, and UI elements.
Present your style guide in a clear and organized manner.

Redesign an Existing Website in Invision Studio

Show steps

Apply your Invision Studio skills and web design knowledge to improve the user experience and visual appeal of an existing website.

Show steps

Choose a website to redesign.
Analyze the existing website's strengths and weaknesses.
Create a new design in Invision Studio, focusing on improvements.
Present your redesign and explain your design choices.

Review 'Refactoring UI' by Adam Wathan and Steve Schoger

Show steps

Improve your UI design skills by learning practical techniques for refining and enhancing the visual appeal of your websites.

View Melania on Amazon

Show steps

Read 'Refactoring UI' by Adam Wathan and Steve Schoger.
Identify key design principles and techniques.
Apply these techniques to your Invision Studio projects.

Create a Responsive Web Design Prototype

Show steps

Build a fully functional and responsive web design prototype in Invision Studio, showcasing your ability to adapt designs to different screen sizes and devices.

Show steps

Plan the website's structure and content.
Design the desktop version in Invision Studio.
Create responsive versions for mobile and tablet devices.
Add interactions and animations to enhance the user experience.
Test the prototype on different devices and browsers.

Career center

Learners who complete Design Responsive Websites with Invision Studio will develop knowledge and skills that may be useful to these careers:

Web Designer

A Web Designer is responsible for creating the visual layout and user interface of websites. This course helps you master Invision Studio, which is essential for creating stunning websites and mobile apps. The course's coverage of responsive web design, including working with 12-column grids for pixel perfection, directly applies to the daily tasks of a Web Designer. By learning how to export prototypes with all CSS available, you ensure seamless collaboration with web developers. Learning about design principles and web design fundamentals helps you create modern and elegant designs, making this course a valuable asset for aspiring web designers.

See salaries and explore the career path for Web Designer

Prototype Designer

A Prototype Designer specializes in creating prototypes of websites and applications to test and refine designs. This course is centered around mastering Invision Studio, a tool ideal for creating high-fidelity prototypes. The course material on exporting prototypes with CSS available streamlines the handoff to developers. The course's focus on responsive web design is essential for creating prototypes that work across various devices. Learning to create interactions and work with components enhances your ability to quickly iterate on design ideas, thus improving your Prototype Designer skills.

See salaries and explore the career path for Prototype Designer

User Interface Designer

A User Interface Designer focuses on the interactive elements of a website or application. This course empowers you to design intuitive and engaging user interfaces by mastering Invision Studio, a program specifically made for Web Design. The course will prepare you for the role of User Interface Designer through its emphasis on creating interactions, working with components for efficiency, and understanding responsive design principles for various devices. The knowledge of web design and UX fundamentals taught in the course is an essential element in becoming a User Interface Designer. Additionally, the course material on finding inspiration and choosing the right colors will improve your designs.

See salaries and explore the career path for User Interface Designer

Interaction Designer

An Interaction Designer focuses on designing interactive elements within a digital product, such as websites and applications. This course helps you master Invision Studio, and it enables you to prototype interactions effectively. The emphasis on responsive design ensures that your interactions work seamlessly across different devices. The course's focus on how to create interactions is beneficial for aspiring interaction designers. Learning to work with components boosts productivity and improves the consistency of your designs, which maximizes your capability as an Interaction Designer.

See salaries and explore the career path for Interaction Designer

Mobile App Designer

A Mobile App Designer specializes in creating the layout and design of mobile applications. This course can help you learn how to design mobile apps using Invision Studio. This course helps you learn how to design mobile apps using Invision Studio. The course's in-depth coverage of responsive design for mobile devices is essential for crafting user-friendly app experiences. By learning how to create interactions and work with components, you will enhance your ability to create engaging mobile app designs. The knowledge of web design principles taught in the course will help you make informed design decisions.

See salaries and explore the career path for Mobile App Designer

Front-End Developer

A Front End Developer implements visual elements and user interfaces of a website. The course's focus on exporting prototypes with CSS available directly benefits front end developers by streamlining the development process. Mastering Invision Studio and understanding responsive design principles learned in the course helps front end developers translate designs into functional and visually appealing websites. Learning about the 12-column grid system helps you create pixel-perfect layouts that align with design specifications. By taking this course, you will gain the skills to work efficiently with designers and deliver high-quality front end code.

See salaries and explore the career path for Front-End Developer

Web Developer

A Web Developer is responsible for building and maintaining websites. This course provides a foundation in web design principles and tools, specifically Invision Studio. The most useful feature to the Web Developer is that the course shows how to export prototypes with all CSS available for Web Developers. By learning how to design responsive websites for desktop, mobile, and tablet, you gain a comprehensive understanding of the design considerations needed for effective web development. The course's exploration of web design fundamentals helps you create visually appealing and user-friendly websites.

See salaries and explore the career path for Web Developer

Digital Designer

A Digital Designer creates visual assets for a variety of digital platforms. The course may be useful, as it covers design principles. The course also helps with web design fundamentals, which are both important aspects to digital design. Mastering Invision Studio enables you to create high-quality designs efficiently. The focus on responsive design ensures your creations look great across various devices, which is critical for digital design. The course's instructions on where to find inspiration and choose the right colors is vital for producing effective visual assets.

See salaries and explore the career path for Digital Designer

UX Designer

A UX Designer enhances user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. This course may be useful in understanding web design and UX fundamentals, which helps lay the groundwork for designing user-friendly and effective digital experiences. By learning to master Invision Studio and design effective interactions, you can improve the user experience on websites and apps. Gaining familiarity with the principles taught in this course will enhance your ability to make informed design decisions as a UX Designer.

See salaries and explore the career path for UX Designer

User Experience Researcher

A User Experience Researcher investigates user behavior and needs to inform design decisions. Though this course's primary focus is on design, the coverage of web design and UX fundamentals provides a valuable foundation for understanding design principles. This foundation may be useful for user experience researchers. This course includes an understanding of responsive design, interactions, and components, which helps you appreciate the design considerations that impact user experience. Learning about finding inspiration helps you stay informed about current design trends and best practices.

See salaries and explore the career path for User Experience Researcher

Creative Director

A Creative Director oversees the visual aspects of a project or campaign, guiding the creative team to ensure a cohesive and effective design. While this role often requires an advanced degree, this course may be helpful for understanding responsive design principles and web design fundamentals. Learning to find inspiration and choose the right colors can help you guide your team toward creating modern and elegant designs. While the course focuses on the hands-on use of Invision Studio, the knowledge gained can inform your strategic decisions.

See salaries and explore the career path for Creative Director

Graphic designer

A Graphic Designer creates visual concepts that communicate ideas and messages. While graphic design is a broad field, this course focuses on web design aspects using Invision Studio. The coverage of graphic and web design principles helps you create visually appealing and effective designs. The course's tips for productivity and best practices helps you streamline your design process. Learning how to find inspiration helps spark creativity and ensures you stay current with design trends. Though Graphic Designers usually work outside the digital sphere, this course may still be useful to them.

See salaries and explore the career path for Graphic designer

Art Director

An Art Director is responsible for the visual style and images in various projects, ensuring they align with the overall brand and message. The course may be useful, as the tips on where to find inspiration and choosing the right colors can directly inform your visual direction. Learning about web design principles helps you appreciate the considerations for creating effective online experiences. Though Art Directors generally work across various mediums, the focus on web design can broaden your skillset and provide valuable insights into digital design trends.

See salaries and explore the career path for Art Director

Web Content Creator

A Web Content Creator develops and manages content for websites, including text, images, and multimedia. While this course primarily focuses on design, understanding web design principles and responsive design is helpful for creating content that looks good across all devices. This course will also prove useful, thanks to its focus on web design fundamentals. Acquiring familiarity with Invision Studio enables you to collaborate more effectively with designers and developers. Learning about finding inspiration can help you generate fresh and engaging content ideas.

See salaries and explore the career path for Web Content Creator

Digital Marketing Specialist

A Digital Marketing Specialist develops and implements marketing strategies to promote products or services online. While not directly related to marketing, understanding web design principles as taught in this course can help you create more effective marketing campaigns. The course will prove useful to Digital Marketing Specialist, since it teaches web design fundamentals. Learning about responsive design ensures your marketing materials look great on all devices. Gaining insights into design trends and best practices, can help you create visually appealing and engaging campaigns.

See salaries and explore the career path for Digital Marketing Specialist

Design Responsive Websites with Invision Studio

What's inside

Learning objectives

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses