Adobe XD Design Tutorial: Company Website Landing Page


Hey Guys, Akshay here and welcome back to the channel In this video i have a web design tutorial for you guys We are going to be designing this Minimal website landing page for a fictional construction company from scratch. So let’s get started So once you open up adobe xd you’ll be given an option to create an artboard For this tutorial i’ll be using the standard web size document that is 1920 x 1080 Let’s rename this artboard to homepage Alright We are going to start by creating the background for out website Choose the rectangle icon and create the rectangle to the size of the artboard Deselect the border and i’m going to give it a solid black for now Now let’s drag in the image that we are going to be using for the background I downloaded these images from unsplash I’ll leave a link to this in the description below Now let’s align the image to the art board and scale it down Make sure to hold down shift when scaling down to make sure it scales evenly Now right click on this image Go to arrange and send to back Change the fill of the rectangle to a linear gradient also change the angle of the gradient and reduce the fill opacity so that the image behind is slightly visible What i’m basically doing here is creating a dark overlay for the image so that any text on top can be clearly visible You can increase or decrease the fill opacity here to see how dark you want the overlay to be. I’m going to adjust the opacity of the rectangle to say about 75% Now let’s select the rectangle and the image to quickly group them Let’s name it background Let’s start by creating the layout for our landing page i’m quickly going to create two rectangles here The first one is to display the information about the image and the second one is to display the page number that we are currently on and for the next and previous arrow icons. I’ll also change the fill of the smaller rectangle to a very light orange Now once that’s done we can start adding in the text for our website I’m just going to be choosing a random name and location for this house Also the font that i’m using is Optima and Avenir Pro I only used Optima for the Large (H1) Headings and for the rest of the text i use Avenir Pro Let’s also add in our call to action button I’m going to remove the border and change the border radius to 5 I’m also going to change the fill to the same orange that we used for the smaller rectangle So this call to action button is going to be used to see the projects I’m also going to scale it down a bit and center it within the rectangle. Now let’s select these two and group them together. Let’s call it CTA ( Call to action) LEt me just quickly bring in the layout guides to make sure everything’s aligned properly So it’s pretty important you make sure you align everything I’m also going to align the rectangles to the first guide now that everything’s perfectly aligned we can start adding in the content for the rectangles But before that i’m going to choose the first rectangle and change the fill to a solid black and also give it a background blur. Now i’m just going to adjust the amount of blur and brightness to get a dark semi-transparent look Now that’s done we can start adding in the text I’m going to start by adding in the main text that is bluerock house and for the sub text i’m just going to be adding some lorem ipsum or some dummy text for now. Also i think there’s a plugin you can install to add lorem ipsum text But i’m just going to copy and paste it for now. I’m going to scale this down to 18 and change the line height to 31 I’m also going to change the fill to a very light grey So now that we are done with the first rectangle we can start working on the second one I’m going to start by adding the page number that were currently on. Also let’s change the fill to white. Now let’s add in the total number of pages I’m going to make this text significantly smaller than the current page number Now i’m just going to align these up really quick. I’m also making sure the space between them is same. Let’s also lower the opacity of the total page number to about 40%. Let’s create the arrow icons to move between the pages To create the arrow first i’m going to start by making a square then using the pen tool to make the arrow icon using the square as a guide I’m going to give this a fill of white and also scale it down a bit and increase the border size to 3 Press Ctrl + D to duplicate the arrow and rotate it Let’s align these out real quick I’m giving a spacing of 40 from each side Let’s also center the numbers as well. Now since we are already on the first page we cannot go back So i’m going to reduce the opacity of the first arrow so that it shows it’s not clickable. I’m also going to bring down this text a bit to the center Our Landing Page design is almost complete The only thing left now is to create a logo and the menu, search and social icons. for the logo i’m just going to type out “inHouse” This is the name of our fictional company I’m also going to align it and give it and give it a spacing of 50 from the top To design the search icon i’m simply going to create a circle and create a line from under neath the circle Next select both of these and increase the border size and unite them. Let’s also change the fill to a white. For the menu icon simply create a line Let’s change the fill to a white and then duplicate it twice. Let’s also group these three lines together then i’m going to bring these icons to the right Let’s open the guides one more time to make sure everything’s aligned perfectly The menu icon is not properly aligned, let’s fix that and i’m also going to align this search icon and give it a 50 spacing from the right Now let’s add in the social icons I got these icons from i think png tree, i’m not sure but i downloaded the SVG versions of it so that i can modify them if i need to. Let’s scale these down and change the fill color to white. I think i’ll scale these down a bit more Now i’m just going to align this I’ll going to give 50 spacing from the bottom and align it to the grid and 30 spacing from the left Also there’s one last thing that i would like to add to this design and that’s a page indicator I know we already have a page number to do that but i feel like this adds a bit more to the design visually. I’m just going to create a rectangle then use the repeat grid tool to make 4 of them. I’m going to change the color of the first one to the orange and the rest i’m going to change it to a dark grey and bring down the opacity. So our design is finally complete and it’s time to prototype. Press Ctrl + D to duplicate your art board I’m going to be making a simple image slider for our landing page design There’s a few quick changes to be made to the second art board Like changing the page number, the page indicator adding a new background image and also changing the H1 Text that we have for the image Now just won’t work just yet To get the image sliding effect you need to copy the image from the second artboard onto the first one and position it above the first artboards image Now move the copied image to the right the decrease the opacity to zero Now that that’s done we can jump into prototype mode and start protyping First select the arrow from the second art board and map it to the first one Also choose auto animate with ease-in-out for the duration of 0.8 seconds Repeat the same process for the first artboard and click on play ( Preview ) So as you can see we have this smooth image slider animation going on here i have completed all 4 image slides using the same process and this is what the end result looks like So that’s it for this quick web design tutorial I hope you guys found this tutorial helpful consider leaving a thumbs up if you did i’d greatly appreciate it and also don’t forget to subscribe for more design related content Hope you guys have a great day and i’ll see you in the next one.

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Post navigation

8 thoughts on “Adobe XD Design Tutorial: Company Website Landing Page

Leave a Reply

Your email address will not be published. Required fields are marked *