Are you looking for a step-by-step guide on how to use Adobe XD? If so, this blog post is perfect for you! In this tutorial, I will show you how to design beautiful websites in Adobe XD.
From sketching out the site’s layout and navigation structure to adding text content and images, I’ll cover it all. I’m confident that after reading through this post, you’ll be able to create beautiful websites of your very own using Adobe XD!
Designing websites can seem like a daunting task. But with the right tools and guidance, anyone can do it!
With my help, we’re going to walk through designing a simple website from start to finish in Adobe XD. By following these steps, by the end of this tutorial, you should have enough knowledge about designing websites in Adobe XD that will allow you to create sites of your very own!
Table of Contents
- What is Adobe XD?
- Why Should You Use Adobe XD To Design Websites?
- How To Design A Website With Adobe XD
- Step 1: Open the App
- Step 2: Create Artboards
- Step 3: Create Assets
- Step 4: Let’s get designing
- Step 5: Make your design responsive
- Step 6: Preview your web design
- Step 7: Send it to clients, developers or start developing yourself
What is Adobe XD?
“Built from the ground up with performance top of mind, Adobe XD helps you craft prototypes that look and feel like the real thing, so you can communicate your design vision and maintain alignment across your team efficiently” – Adobe.com
Adobe XD is excellent design software that allows you to prototype websites, mobile apps and other software without sacrificing any quality.
The software has some of the design features from Adobe’s most popular programs Illustrator and Photoshop. Designers can create vectors illustrations for their web design layouts and prototypes.
From a web designer’s perspective, it allows us to create prototype or wireframes of the website that can be used for evaluations and feedback before deploying.
This is useful from an evaluation point of view and saves time in deployment. Stakeholders will have their say about what they want to be included on the site without waiting until after development has started.
Personally, I use Adobe XD to create high-fidelity prototypes of my client’s website before I start designing it on WordPress. This saves me time on revisions and provides the client with a realistic view of the finished website.
Why should you use Adobe XD to design websites?
Provides a streamlined process
Adobe XD keeps the web designing process simple by providing all the essential tools in one place.
Moreover, when you have completed the designing process, you might be required to pass all your assets to a developer who will start developing the website. Adobe XD has also thought about this and provides you with a feature where you can export all your artboards and assets at once and then send it off to a developer.
Seamless transition for Adobe Cloud Users
Since Adobe XD is another app in the adobe suite, it integrates seamlessly with other Adobe apps like Illustrator and Photoshop. Adobe Cloud users will have an easier time transitioning between programs as they are all connected.
Adobe XD’s interface is designed to feel familiar if you have used tools like Illustrator or Photoshop. This means that there might not be any hurdles for people who may have used some of the Adobe apps previously when creating web design prototypes.
Easier to use interface
Adobe XD is very user-friendly and makes web designing accessible for newcomers who might not be familiar with design software, making it a great starting point.
You do not need to have a prior degree in designing or any experience with graphic design. The clean and intuitive interface has all the necessary tools to understand the app.
Rapid Prototyping
A discussion that I have had with some of the previous web designers is that “Photoshop does the same thing, why should I switch to Adobe XD”.
And my argument with them always is that adobe XD is nothing like Photoshop, you can do all sorts of photo manipulations and vector graphic creation with photoshop, but Adobe XD provides a powerful wireframing and prototyping experience for web designers along with vector graphic creation.
What this means is, adobe XD gives you a feature to interact with your design just as a visitor would interact with a website. This feature can not be found in photoshop, and I think it is a staple in web designing.
Libraries & Plugins
Adobe XD has a vast library of plugins that offers a lot of customisation options. You can find just about any type of stock photo when getting started.
Some plugins even allow for CSS and HTML code export if needed, which is always nice.
I use plugins like Quick Mockup, UI faces, uilogos and Icons 4 design. These plugins help me get a headstart in the designing process by providing me with pre-built icons, logos or interfaces.
Saves times on Revisions
We all know how time-consuming web design can be. Adobe XD has a “live preview” feature that allows you to see your website as it would actually load on the web browser and make adjustments accordingly to get the look just right.
Now you can send these designs to your client and get their feedback on them. Early feedback will save you time and resources and will also give your clients a realistic idea of what their website will look like live.
It is Free
Adobe XD is a free Adobe product (Starter Plan). It has all the tools that you would need to design websites and apps, so there’s no reason not to give it a try.
How to design a website with Adobe XD
Now let’s see how you can design a website in just minutes using Adobe XD.
Step 1: Open the App. Obviously!
When you first open the application, you will be prompted to select an artboard size.
You can select any as you can create different artboards once you are inside the document.
Step 2: Create Artboards
Once you are inside the app, create artboards according to your requirements.
I would personally have 2 – 3 artboards; one would be with the desktop/Laptop size, the other with the tablet size and the last one with a mobile size.
How to create an artboard in Adobe XD?
Select the “Artboard” tool from the toolbar located on the far left side of the screen. Or you can press ‘A’, and your mouse cursor will switch to the artboard tool.
Once you have selected the artboard tool, you will see all the different artboard options on the right side of the screen.
How many artboards to create?
For simplicity, create two different artboards. The first one should be from the Web/Desktop section, and the other should be from the mobile section.
I personally go for “Web 1920 (1920 X 1080)” and “iPhone X, XS, 11 Pro (375 X 812)”. However, you should pick the ones that you want to work with.
Rename the Artboards
Follow good design practices and name everything or every component you build. This will make things easier to understand. For example, “Desktop Web Design” is better than “Web 1920 – 1”.
Step 3: Create Assets
This might be the most important step in designing websites using Adobe XD. Why? Because once you create assets, you can use them anywhere throughout the document. Convenient, isn’t it?
How to create document assets in Adobe XD?
Select the Libraries option from the toolbar, which will be located on the bottom left. Or use the keyboard shortcut Shift + Command + Y (Mac) or Shift + Ctrl + Y (Windows).
Once you have selected the libraries option, you will see the Document assets panel open up alongside the toolbar.
From the Document Assets panel, you can add the color scheme of your web design, Heading or text styles and components, aka buttons or sections.
How to add a color scheme to document assets in Adobe XD?
Open the document asset panel first, Toolset bar > Libraries. Next, in the document assets panel, you will see the colors option. Select the object whose color you want to add to the document asset and then click the plus (+) icon next to the color option.
How to add character styles to document assets in Adobe XD?
Within the document assets panel, locate the Character Styles option. It will be below the colors options. To add a character style, simply create a heading style, select that text and then click the plus (+) icon next to the character styles option.
How to add components to document assets in Adobe XD?
Within the documents assets panel, locate the Components option. It will be below the character styles option. To add a component, simply create the components you require, e.g. buttons, header section, footer section, infoboxes, etc. Select the component you wish to add and then click the plus (+) icon next to the component option.
If none of what you read about components, character styles, or colours made sense, don’t worry. These are just to create reusable assets and styles that you can use throughout the document.
I will cover them more when we go through the following steps. So follow along!
Step 4: Let’s get designing
At this stage, if you are not yet familiar with the interface of the Adobe XD, I would say open the app and play around with the tools. It is better to explore them yourselves and see how they fit in your design process.
Or you can watch my video and gain more insights on the Adobe XD layout.
Related: How to Make Website Designs More Engaging Using Storyboard
Designing a header section in Adobe XD
Before starting a design in Adobe XD it is beneficial to have a rough sketch of the website structure. This would ensure that you have a starting point and a base to refer back to if something doesn’t feel right.
Now a basic header structure would consist of a logo, navigation layout, contact details or buttons. However, a header can have any elements you wish, depending on the requirements of the project.
For instance, a portfolio website can have a logo, navigation layout and social profile buttons. On the other hand, an e-commerce website can have a logo, primary navigation layout, cart icon, account icon and contact button.
You can see the finished header that I have created in Adobe XD from scratch.
Designing a footer section in Adobe XD
Designing a footer is similar to how you designed the header section above.
Here you can group all the header and footer sections and convert them into components. You can utilise these components throughout your design process. For instance, when you create a new page/artboard, instead of copying every element of the header and footer one by one, just go into the components option and copy the header with one click.
Designing main sections in Adobe XD
Again, similar to how you designed the header and footer, just design the small components like Call to action section, about sections, etc.
Step 5: Make your design responsive
It is always better to start your web design with a mobile-first approach as most users nowadays access information through their mobile phone.
If you have designed the structure on a desktop artboard, you can easily replicate it on a mobile artboard. Just create a mobile artboard and start placing the components in a user-friendly way.
You can see how I have converted the desktop web design to a mobile design.
Step 6: Preview your web design
Once you have completed your design and you are happy with it. Preview the design and see how it looks on desktop and mobile.
How to preview the artboard in Abode XD?
To preview, select the relevant artboard and click on the play button icon on the top of the screen or use the keyboard shortcut Command + Enter (Mac) or Ctrl + Enter (Windows).
Step 7: Send it to clients, developers or start developing yourself
You’re close to the finish line. Now you should be sending your designs and getting feedback from clients or handing assets over to a developer so they can start coding away!
Were you able to create your amazing web design by following these steps? Let me know in the comments below!
Final Thoughts
With Adobe XD, you can design a website that is responsive and mobile-friendly. You may also be able to create an interactive prototype of the site with this software if you’re looking for more feedback on your idea before going live!
I know designing a website from scratch might seem like a daunting task, but it doesn’t have to be with Adobe XD. With all the design tools available in one place, designing websites has never been this easy.
Now go out there and start creating something unique in no time at all by using the power of Adobe XD today!
However, if you don’t want to spend hours learning how to use Adobe XD’s interface, I offer web design services, so you don’t have to go into the nitty-gritty details. In that case, you can reach out to me at admin@sparshgambhir.com.
