Course

Adobe XD Tutorials by DesignCourse

4.82

(22)

7h23m

Teacher

DesignCourse

I am Gary. I have created close to 100 courses from graphic design to advanced frontend development. I have worked with Envato Networks TutsPlus.com, DigitalTutors.com, Pluralsight.com, LinkedIn Learning & Lynda.com. I teach full stack development! Which means you will see tutorials regarding UI/UX, Frontend Dev, Backend Dev, Graphic Design and more!

Ver sobre

Sign in or Register to access the course.

Do not worry, it is free!

Share

Evaluate course

Go to certificates

Report a problem

Course content

  • How to use the New Adobe XD UI Kits

    Written tutorial: https://goo.gl/MClRPw
    http://coursetro.com for more awesomeness.

    A few days ago, Adobe updated XD to include 3 UI kits for the most popular mobile platforms. Today, I show you how to use them.

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

    Now, I focus all of

  • Adobe XD Web Design Tutorial

    Learn how to make this mockup a reality in the browser:
    https://goo.gl/mi1fKf
    (click show more)
    Here's a written tutorial of this video:
    https://goo.gl/vJ1VLM

    Download the assets needed to follow along with this tutorial here (this includes the final Adobe XD project file, too):
    http://s3.amazonaws.com/coursetro/behance-assets.zip

    ----------------------

    Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project.

    View his portfolio here:
    https://www.behance.net/dennisschafer

    ...and his personal website here:
    http://www.dennisschafer.com/

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter:

  • Previewing your XD Prototypes on a Phone (Windows users)

    Written tutorial: https://goo.gl/o7xJQo
    http://coursetro.com

    So yeah, as it stands, previewing your Adobe XD prototypes on a phone isn't as easy as plugging in your phone via USB. So here's how you do it until they update the app.

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

  • Adobe XD Scroll & Blur Tutorial (New Updates to XD)

    Written tutorial: https://goo.gl/xiOKA5
    Check out https://coursetro.com for more XD stuff!

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

    Now, I focus all of my time and energy on this channel and my website Coursetro.com.

    Come to my discord server or add me on social media and

  • Designing a Web App in Adobe XD

    Take the full course: https://goo.gl/07vmFs
    View the app you will learn to design & code: http://codepost.net

    The logo.svg download (right click, save as):
    http://codepost.net/assets/images/logo.svg

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

    Now, I focus all of my time and

  • Adobe XD App Design [React vs Angular vs Vue by Example]

    Course page: https://goo.gl/0AJCkC

    - If you want access to the project files, visit https://coursetro.com, create a free account, and visit the course page and click the download project files button.

    - This 1 hour long video represent parts 1-9 of the above course. If you wish to watch smaller, bite-sized videos, you can take the course above.

    This course is currently in-development and should be finished by early June '17.

    In this video, we first create a prototype / mockup of the intended app that we will create in React, Angular and Vue.js. Look out for the remaining sections of the course by subscribing here!

    https://coursetro.com

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's T

  • Adobe XD CC - CUSTOM UI Design Tutorial

    https://coursetro.com for more cool stuff, and subscribe here!


    In this video, I will show you my thought process as I design a unique UI concept in Adobe XD CC.

    https://facebook.com/coursetro

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

    Now, I focus all of my time and ener

  • FLAT vs. Depth for Web Design in 2018? A Quick Tutorial

    https://coursetro.com - I've been a UI designer since the late 90's, so, I've seen a lot of the trends come and go. Flat design however has stuck around. Is it always the best approach? Get my take as I walk you through my process!

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

  • Landing Page Tutorial for 2018 - Part 1 of 2 (Design)

    The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99)

    Written tutorial: https://goo.gl/2BW3Eb
    Project file: https://s3.amazonaws.com/coursetro/pre.xd
    https://coursetro.com for more good stuff! And subscribe here!

    Follow along as I tackle a landing page design for my own cryptocurrency app! Learn how I approach landing page design.

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who

  • Landing Page Tutorial for 2018 - Part 2 of 2 (Code)

    The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99)

    Written tutorial coming soon!
    https://coursetro.com for more good stuff, plus, subscribe here!

    In the previous tutorial, we designed a mockup of a landing page for a web app. Now, let's export the necessary SVG assets and make the project a reality in the browser through HTML and CSS. We will also animate some of the SVG assets with CSS animation.

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Ch

  • Creating a Clever 404 Page - Adobe Illustrator / XD Tutorial

    While I'm deep in development of an RxJS course, I took a small break this morning to cover the process of designing a clever 404 page. I put myself on the spot and use a random website generator from which I take on the task of designing a relevant 404 page.

    Enjoy!

    https://coursetro.com

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands l

  • UI Design & Animate a Smart Watch App with Adobe XD & After Effects

    As a part of Adobe's XD Daily Challenge, participants were tasked with designing a weather app for a smart watch UI. In this tutorial, I will show you how I designed my entry and also animate some interaction design using Adobe After Effects.

    Adobe XD Daily Challenge:
    https://xd.adobelanding.com/daily-challenge/

    Smart watch mockup:
    https://360mockups.com/free-mockups


    Enjoy!

    - - - - - - - - - - - - - - - - - - - - - -

    Subscribe for NEW VIDEOS weekly!

    My Patreon: https://www.patreon.com/designcourse
    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience an

  • Using Adobe XD Auto-Animate & Delay to Create Complex UI Animation Sequences

    #adobexd #adobemax #ui Today's Question: For UI Animations in production, do you use just CSS or a CSS/JS library of sorts?
    https://skl.sh/designcourse2 - First 500 people to sign up will get their first 2 months free!
    -- With Adobe XD's massive update a couple days ago, we now have the ability to create simple and complex animations for our prototypes. In this Adobe XD tutorial, we're going to break down exactly how to use auto-animate along with delay to create impressive animations.

    Let's get started!

    - - - - - - - - - - - - - - - - - - - - - -

    Join my Patreon! https://www.patreon.com/designcourse

    Subscribe for NEW VIDEOS!

    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - -

  • Adobe XD Drag Tutorial - Create an Interactive Image Carousal

    #adobexd #adobemax Today's Question: Do you use any paid services for learning design or code?
    https://skl.sh/designcourse2 - First 500 people to sign up will get their first 2 months free!
    -- The new drag feature from Adobe XD is a great way to prototype drag gestures for things like image carousals. Using auto-animate and delay, we can make them even more impressive. That's what we're going to do in today's tutorial! Let's get started!

    - - - - - - - - - - - - - - - - - - - - - -

    Join my Patreon! https://www.patreon.com/designcourse

    Subscribe for NEW VIDEOS!

    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full s

  • From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu

    Check out Bookmark.com - https://goo.gl/mup5Av
    Today's Question: Do you use any tools or plugins for CSS animations?
    -- It's a lengthy one today! But a great one, because many of you ask me how to take your UI prototypes made in Adobe XD and make them a reality in the browser. Today, I'm delivering! We're going to create a large overlay menu (sometimes referred to as a "mega menu") first in Adobe XD, exactly as it should appear in the browser. Then, we'll step inside the code editor and make it a reality with HTML, CSS and vanilla JavaScript.

    So, instead of the usual formula of just covering an html tutorial, css tutorial, javascript tutorial, or adobe xd tutorial -- We're covering everything in mega tutorial!

    Let's get started!

    - - - - - - - - - - - - - - - - - - - - - -

    Join my Patreon! https://www.patreon.com/designcourse

    Subscribe for NEW VIDEOS!

    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigne

  • Using Anime.js to Create SVG Morphing Page Transitions with Vanilla JS!

    Check out Bookmark.com - https://goo.gl/mup5Av
    Today's Question: What software do you use to create SVG's?
    -- In today's video, we're going to keep things simple and use vanilla JS to demonstrate how you can create morphing SVG-based page transitions with the help of Anime.js. There are a variety of ways to achieve this effect, and this is one such way. In the future, I will cover doing this in Angular, Vue and React.

    Let's get started!

    - - - - - - - - - - - - - - - - - - - - - -

    Join my Patreon! https://www.patreon.com/designcourse

    Subscribe for NEW VIDEOS!

    My site: https://coursetro.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro's Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    - - - - - - - - - - - - - - - - - - - - - -

    Who is Gary Simon? Well, I'm a full s

Course content

0h10m

How to use the New Adobe XD UI Kits

Written tutorial: https://goo.gl/MClRPw
http://coursetro.com for more awesomeness.

A few days ago, Adobe updated XD to include 3 UI kits for the most popular mobile platforms. Today, I show you how to use them.

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of

0h30m

Adobe XD Web Design Tutorial

Learn how to make this mockup a reality in the browser:
https://goo.gl/mi1fKf
(click show more)
Here's a written tutorial of this video:
https://goo.gl/vJ1VLM

Download the assets needed to follow along with this tutorial here (this includes the final Adobe XD project file, too):
http://s3.amazonaws.com/coursetro/behance-assets.zip

----------------------

Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project.

View his portfolio here:
https://www.behance.net/dennisschafer

...and his personal website here:
http://www.dennisschafer.com/

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter:

0h05m

Previewing your XD Prototypes on a Phone (Windows users)

Written tutorial: https://goo.gl/o7xJQo
http://coursetro.com

So yeah, as it stands, previewing your Adobe XD prototypes on a phone isn't as easy as plugging in your phone via USB. So here's how you do it until they update the app.

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

0h06m

Adobe XD Scroll & Blur Tutorial (New Updates to XD)

Written tutorial: https://goo.gl/xiOKA5
Check out https://coursetro.com for more XD stuff!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and

0h21m

Designing a Web App in Adobe XD

Take the full course: https://goo.gl/07vmFs
View the app you will learn to design & code: http://codepost.net

The logo.svg download (right click, save as):
http://codepost.net/assets/images/logo.svg

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and

1h03m

Adobe XD App Design [React vs Angular vs Vue by Example]

Course page: https://goo.gl/0AJCkC

- If you want access to the project files, visit https://coursetro.com, create a free account, and visit the course page and click the download project files button.

- This 1 hour long video represent parts 1-9 of the above course. If you wish to watch smaller, bite-sized videos, you can take the course above.

This course is currently in-development and should be finished by early June '17.

In this video, we first create a prototype / mockup of the intended app that we will create in React, Angular and Vue.js. Look out for the remaining sections of the course by subscribing here!

https://coursetro.com

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's T

0h37m

Adobe XD CC - CUSTOM UI Design Tutorial

https://coursetro.com for more cool stuff, and subscribe here!


In this video, I will show you my thought process as I design a unique UI concept in Adobe XD CC.

https://facebook.com/coursetro

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and ener

0h18m

FLAT vs. Depth for Web Design in 2018? A Quick Tutorial

https://coursetro.com - I've been a UI designer since the late 90's, so, I've seen a lot of the trends come and go. Flat design however has stuck around. Is it always the best approach? Get my take as I walk you through my process!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

0h31m

Landing Page Tutorial for 2018 - Part 1 of 2 (Design)

The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99)

Written tutorial: https://goo.gl/2BW3Eb
Project file: https://s3.amazonaws.com/coursetro/pre.xd
https://coursetro.com for more good stuff! And subscribe here!

Follow along as I tackle a landing page design for my own cryptocurrency app! Learn how I approach landing page design.

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who

0h23m

Landing Page Tutorial for 2018 - Part 2 of 2 (Code)

The program I used to design this landing page is Adobe Experience Design (Adobe XD). I created a course on how to use it! 50% OFF COUPON: https://goo.gl/Zbgnmk (Watch for $9.99)

Written tutorial coming soon!
https://coursetro.com for more good stuff, plus, subscribe here!

In the previous tutorial, we designed a mockup of a landing page for a web app. Now, let's export the necessary SVG assets and make the project a reality in the browser through HTML and CSS. We will also animate some of the SVG assets with CSS animation.

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Ch

0h32m

Creating a Clever 404 Page - Adobe Illustrator / XD Tutorial

While I'm deep in development of an RxJS course, I took a small break this morning to cover the process of designing a clever 404 page. I put myself on the spot and use a random website generator from which I take on the task of designing a relevant 404 page.

Enjoy!

https://coursetro.com

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands l

0h41m

UI Design & Animate a Smart Watch App with Adobe XD & After Effects

As a part of Adobe's XD Daily Challenge, participants were tasked with designing a weather app for a smart watch UI. In this tutorial, I will show you how I designed my entry and also animate some interaction design using Adobe After Effects.

Adobe XD Daily Challenge:
https://xd.adobelanding.com/daily-challenge/

Smart watch mockup:
https://360mockups.com/free-mockups


Enjoy!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

My Patreon: https://www.patreon.com/designcourse
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience an

0h24m

Using Adobe XD Auto-Animate & Delay to Create Complex UI Animation Sequences

#adobexd #adobemax #ui Today's Question: For UI Animations in production, do you use just CSS or a CSS/JS library of sorts?
https://skl.sh/designcourse2 - First 500 people to sign up will get their first 2 months free!
-- With Adobe XD's massive update a couple days ago, we now have the ability to create simple and complex animations for our prototypes. In this Adobe XD tutorial, we're going to break down exactly how to use auto-animate along with delay to create impressive animations.

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Join my Patreon! https://www.patreon.com/designcourse

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - -

0h24m

Adobe XD Drag Tutorial - Create an Interactive Image Carousal

#adobexd #adobemax Today's Question: Do you use any paid services for learning design or code?
https://skl.sh/designcourse2 - First 500 people to sign up will get their first 2 months free!
-- The new drag feature from Adobe XD is a great way to prototype drag gestures for things like image carousals. Using auto-animate and delay, we can make them even more impressive. That's what we're going to do in today's tutorial! Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Join my Patreon! https://www.patreon.com/designcourse

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full s

0h45m

From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu

Check out Bookmark.com - https://goo.gl/mup5Av
Today's Question: Do you use any tools or plugins for CSS animations?
-- It's a lengthy one today! But a great one, because many of you ask me how to take your UI prototypes made in Adobe XD and make them a reality in the browser. Today, I'm delivering! We're going to create a large overlay menu (sometimes referred to as a "mega menu") first in Adobe XD, exactly as it should appear in the browser. Then, we'll step inside the code editor and make it a reality with HTML, CSS and vanilla JavaScript.

So, instead of the usual formula of just covering an html tutorial, css tutorial, javascript tutorial, or adobe xd tutorial -- We're covering everything in mega tutorial!

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Join my Patreon! https://www.patreon.com/designcourse

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigne

0h27m

Using Anime.js to Create SVG Morphing Page Transitions with Vanilla JS!

Check out Bookmark.com - https://goo.gl/mup5Av
Today's Question: What software do you use to create SVG's?
-- In today's video, we're going to keep things simple and use vanilla JS to demonstrate how you can create morphing SVG-based page transitions with the help of Anime.js. There are a variety of ways to achieve this effect, and this is one such way. In the future, I will cover doing this in Angular, Vue and React.

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Join my Patreon! https://www.patreon.com/designcourse

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full s