Adobe XD Advanced: Web Design

Name: Adobe XD Advanced: Web Design
Author: Jessica Henley

Create web wireframes and build website pages from scratch

Preview the first lesson free — get full access to all 5 lessons.

Course: On-Demand

Hello, my name is Jessica Henley, and in these lessons you will learn, plugins for websites, website wireframes, website images, icons and buttons, and designing web pages, getting started with plugins for websites. Here I am on the Adobe Cloud Marketplace, underneath the tab, stock and marketplace. Here, if you look under search all plugins, I have website, pricing is set to all, and apps, I have specified XD, and this is the filters that I have, however, if you don't see one of the apps, plugins, I'm going to be discussing, be sure to just actually type that direct name inside the search box for whichever one I'm going to discuss, if you don't see it after applying these filters. So getting started, I have handpicked some plugins that I want to discuss today, and one of these plugins are favicon exports. So exporting icons for your website, let's take a look at that. So on your website, you may have an icon or a favicon icon that you actually want to export. So whenever you actually go to a website, if you look on the address bar, you will see a little logo or an icon next to the name of the website, and that is called a favicon. So if you ever want to export those, you can download a plugin such as this one. For this, they have the following export sizes, they have web 16 pixels, 32, 96, 128, and 192 pixels. And for iOS, they have 120, 152, 167, and 180. And so you'll have your icon, and then you can just simply select it. So the steps are you would have to actually select your actual icon, then if you wanted your background to be transparent, optionally, you could choose the background color for the iOS or choose transparent, and then you would just click export. You could export that using a PNG, and if you like the sound of that, you could go ahead and get this particular plugin. Another plugin that is very useful is for those designers that will be working with WordPress. So we're going to look at this one for sure. So for WordPress, it's been around for ages, and this is something at some point in your design career that you will most likely need. So you'll definitely want to screenshot or write this particular plugin down. But some cool things about this is that you can create your WordPress website in just a few clicks. So as you can see here, we have the Adobe XD, we have our artboards, and also in different sizes, and you can export them. And you can also customize your WordPress for your actual needs in different steps. So it's very user friendly. And you can manage your site with WordPress, and the cool thing is no code required. And so as we said before, you can convert your Adobe XD to WordPress. So definitely check this out if you're already not using this particular plugin. I'll have two more that I want to discuss that I think will be very helpful to you. So going down to Proto.io, prototyping for all, we're going to take a look at that and take a look at some of the screenshots here. So in this particular app, you can see that you have your artboard and you may want to export this prototype to give to your stakeholders. So here it will allow you to actually export out your designs and share them. So you can share your prototype with your stakeholders to get feedback and validate your ideas, and you can also export out your designs for HTML, PNG, or even PDF. And you can also embed it into your website. You could always check this out and see if it's something that you want. I actually already have this installed, but you could press get if you actually wanted to use Proto.io. Last but certainly not least, I definitely think that this is the highlight of the actual plugins. So here, this is featuring apps, but it also allows you to tailor your designs for websites. So here on this particular screen, you can see that it's for multiple devices. So you can change your content type to web page, but of course they have mobile too. Again, this is called three and visual attention software and why is the software so amazing? It will highlight until you certain areas of your website or your mobile app that will draw attention. So if you want to capture the attention of your user, of course you would have had your taskflows and user flows, maybe beta testing, but how do you know over time as you get droves and droves of customers, how are they engaging with your website? So the cool thing about this site is that it will tell you what areas that your customers are most likely to see, and here are some things to consider. So it'll have an area of interest, so likelihood of areas of interest, also visual elements. So it will provide a score for visual systems and influence your viewer's attraction. And then also the cool thing is a heat map. So it will provide a visual overview of the areas of your designs and so much more. This is definitely something that should be installed and on your computer as you start to wrap up your designs and you're starting beta testing or even after beta you still want to be able to track your customers over time or your users to see how they're interacting with your site because as seasons go by and as the years go by, the data that you had collected at one point on how users are interacting with your site of course will change over time and you want to be able to get that data in real time because you don't want to lose those customers that are coming to your website or your mobile app. So definitely check this out, it has a really good score and I hope this will be beneficial to you. In the next lesson I will show you website wireframes. Thanks for watching.

Advanced Provider : Jessica Henley 5 Lessons · 42m in English

Course Description

In these lessons, we will take a look at various plugins to make your project flow more efficiently as an advanced designer. We will take a look at how to export favicons you can use for your upcoming website designs, along with other plugins that will help you export your artboards for extensive prototyping, animation, and interactivity. You’ll learn about how these plugins can also help you to export your prototypes to HTML, .png, and .pdf formats, or as embedded code for your website. Then we’ll go over some must-have tips for a plugin you can use to see whether your designs will work for your customers, such as by pointing out areas of interest in your designs, what visual elements will influence your viewer's attention, and heat maps and hotspots of areas of your designs to gain the viewer's attention.

What You'll Learn

Download and incorporate plugins into your Adobe XD projects
Use tools and plugins to create website wireframes
Export favicons for use in upcoming website designs
Export prototypes and artboards to formats including HTML, .png, and .pdf, or as embedded code
Apply plugins that highlight areas of interest, heat maps, and hotspots in your designs
Design web pages, images, icons, and buttons for websites

Key Takeaways

Plugins can make an advanced designer's project flow more efficiently.
Plugins allow you to export favicons, prototypes, and artboards for prototyping, animation, and interactivity.
Prototypes can be exported to HTML, .png, and .pdf formats or as embedded code for a website.
A plugin can show whether designs will work for customers by pointing out areas of interest and what visual elements influence a viewer's attention.
Heat maps and hotspots can be used to identify areas of a design that gain the viewer's attention.

Frequently Asked Questions

Who is this course for?

It is aimed at advanced designers who want to make their Adobe XD project flow more efficient using plugins.

What does this course cover?

It covers plugins for websites, creating website wireframes, designing website images, icons, and buttons, and designing web pages, including exporting favicons and prototypes.

What formats can I export prototypes to in this course?

You will learn to export prototypes to HTML, .png, and .pdf formats, or as embedded code for your website.

What skills will I gain from this course?

You will gain skills in web design formatting and creating favicons.

How can plugins help test whether my designs will work for customers?

A plugin can point out areas of interest, show which visual elements influence a viewer's attention, and provide heat maps and hotspots of areas that gain the viewer's attention.