Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Design Responsive Websites with Invision Studio
Rating: 4.4 out of 5(104 ratings)
3,237 students

Design Responsive Websites with Invision Studio

Learn The Secrets of Web Design and How Professional Designers Create Elegant Websites and Mobile Apps.
Created byIvan Lourenço Gomes
Last updated 11/2023
English

What you'll learn

  • 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

Course content

3 sections • 29 lectures • 5h 12m total length

  • Download Invision Studio11:04
  • The Basic Elements: Shapes, Text, Images, etc.9:22

    Design a website top bar in Invision Studio using basic elements—rectangle, logo, and navigation—set a 60px height, use shortcuts and zoom, and plan grid alignment for responsive layouts.

  • Working With 12 Column Grids10:51
  • Importing Fonts to Invision Studio13:47
  • Working With Images11:18

    Learn to work with images in Invision Studio by creating a hero section, adding images via drag-and-drop or fill, and adding a title, subtitle, and button.

  • Adding Text to The Hero Section11:42
  • Adding a Call to Action13:22
  • Working with Components14:05

    Design a best sellers section with a centered title around 34px, a green separator, and 70px margins, then reuse the title as a component in Invision across the page.

  • Creating the Product Box Component12:09
  • Creating the Product Box Component (Part 2)11:57

    Create and reuse a product box component in Invision Studio by selecting images, organizing colors, and applying consistent typography to build a scalable, linkable product grid.

  • * To be continued *0:16
  • More on Components12:47

    Learn to create and manage component variations in Invision Studio, including overrides, detaching, swapping, and nesting, to build consistent, efficient designs from a master component.

  • Footer Design14:36
  • Working with SVGs9:50
  • Exporting Your Prototype7:56

    Export your design as a prototype in Envision Studio, publish to browser, inspect assets and css, and update prototypes with font and layout tweaks.

Requirements

  • A Computer with Access to the Internet
  • Windows or Mac Os

Description

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.


Who this course is for:

  • Students Aiming to Become Professional Web Designers
  • People Interested in Learning The Process of Designing Websites and Mobile Apps
  • Developers Who Want to Learn the Basics of Web Design
  • Anyone aiming for a Career as a Freelance or In-House Web Designer

Report abuse