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,246 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
English [Auto],

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

    Download Invision Studio from envision app dot com slash studio, create account to post prototypes; it runs on Mac OS X 10.11+ or Windows 10+, with Adobe XDA as option.

  • 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

    Master a 12-column grid in Invision Studio to align a top bar logo and navigation, using grid rules, alignment, distribution, and Bootstrap's grid system for responsive web design.

  • Importing Fonts to Invision Studio13:47

    Learn to import Google fonts like Hebel into Invision Studio, set 12–15 px navigation text, and align a responsive top bar with evenly distributed menu items.

  • 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

    Learn to add text to the hero section, style the title and subtitle with contrast, left-align text, adjust font sizes and line height, and group elements for precise vertical alignment.

  • Adding a Call to Action13:22

    Design a compelling call to action in the hero section by adding a high-contrast button, choosing a supporting color scheme, and refining typography, alignment, and spacing.

  • 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

    Create a product box component for the best seller grid using a 12-column layout with image placeholder, category, name, price, and an add-to-bag button.

  • 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

    Design a responsive footer with three sections—customer service, location, and a newsletter sign-up on a dark background—emphasizing alignment, typography, web design principles, and exporting your prototype.

  • Working with SVGs9:50

    Convert social icons to scalable SVGs, edit vector paths in Vision Studio, adjust colors and margins, and export a prototype for browser viewing.

  • 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