Why you should NEVER start building a website in Elementor, but in a design tool like Adobe XD. | Rino De Boer | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Why you should NEVER start building a website in Elementor, but in a design tool like Adobe XD.

teacher avatar Rino De Boer, Designer & Content creator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

5 Lessons (19m)
    • 1. Why you should NEVER start in Elementor, but in Adobe Xd (improve your web design process)

      0:48
    • 2. Six reasons to start your design proces in XD

      7:24
    • 3. What is a profesional design proces

      3:10
    • 4. Where XD is much faster

      7:23
    • 5. Thank you

      0:21
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

564

Students

--

Projects

About This Class

He guys, in this class I'm finally answering the question of why I always start in Adobe Xd with a web design project before I even touch WordPress or Elementor.

This has everything to do with your design process and will actually make your workflow faster (even though it doesn't feel like that).

In this class you will see examples on how fast it is to design a website in Adobe Xd compared to Elementor. The videos also explain the four steps included in a professional designing displaying the features that Adobe Xd has and Elementor doesn’t.

This class is designed to improve your workflow of making a website from scratch. If you start off the right way you save a lot of time building a website for your client.

Get Adobe Xd here: https://www.adobe.com/products/xd.html)" rel="nofollow noreferrer noopener" target="_blank">https://www.adobe.com/products/xd.html)" rel="nofollow noreferrer noopener" target="_blank">https://www.adobe.com/products/xd.html

Meet Your Teacher

Teacher Profile Image

Rino De Boer

Designer & Content creator

Teacher

Hi, I'm Rino and I've been in design for over more than 10 years now. I started with design as a hobby, but I quickly realised that this was more than a hobby for me. So that's why I went to design school and studied: Communication and Multimedia Design at the University of Applied Sciences in Rotterdam (The Netherlands).

I was so passionate about it that I started a YouTube channel about design. This grew to a channel with more than 30.000 subscribers and 4 million total views.

Because of this YouTube channel I was approached by big influencers and brands, and I got the opportunity to start my own company and work for brands like: Coca Cola, ICI Paris XL, RTL and a lot of big influencers (with around 100k to 1m followers).

Because of these projects and the YouTube ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Why you should NEVER start in Elementor, but in Adobe Xd (improve your web design process): Hey, and welcome to the skill share class That is all about your Web design process. So what I do when I design a website is that I first design your website in a tool like Adobe X t Before I start building the website inside of WordPress and I always use element or maybe you use another tool that's also OK, but this class is about the web design process. So in the last couple of months, I got some questions on why I always design your website first and then recreate the whole thing inside of WordPress. Some people were confused by that. So that's why I wanted to make this class to remove all of those questions and why I think it's actually much faster to first start in a design tool before you actually start building, it feels counter-intuitive, but let me explain why. 2. Six reasons to start your design proces in XD: So why do I design a website like this in existence before I go to element or let me explain why. First of all, the difference between Adobe XD and element, or for the people that don't understand, Adobe XD is not a development tool element or is Adobe Ixy is only for design. You cannot export and Adobe XD fell into a website. Not yet. There are some companies that have tried to do this, but it's really hard because it has to do with columns and code. And even if they find a tool, that's what I believe to export an Adobe X-Y fell to element or then the code will probably be not that clean. So now that that's out of the way, let me explain why you can't really make a good websites without first designing it in a tool like Adobe xy, you can also use sketch or FISMA or any other design to don't use Photoshop because that's also really slow. Back in the day. That was the only possible way to do it. But now you have tools like DES. So point number one, you can't really check consistency if you cannot zoom out because if you're working in element or you are working in a zoomed in view of the website. And in that way you can't really check all of the pages, how they look together. But in a tool like this, you can zoom out and you can actually see like due to pages fit nicely together, is this page not too busy compared to the homepage? Is the whitespace consistent on all of your pages? And consistency is one of the things that beginning designers don't really pay attention to. And that is what a design doesn't look as nice. It could look. Point number two, you can't really have an overview of the web version next to the mobile version. Because an element or you can go to the web version or you can go to the mobile version. But for a website like this, I also wanted to make sure that the mobile version looks clean enough before I started to build the website. Because sometimes on a mobile view, you want to hide certain elements on this website. I didn't do that. But sometimes your texts are really long and then a mobile, it doesn't look as good. So maybe you want a different design for your mobile phone. So because you can see them in one overview over here, you can already make these decisions much better upfront, point number, free, putting old versions next to new versions. If you're working with clients, it never almost happens that your first design is actually what they want. So a lot of times, for example, with this website that you can find on my portfolio, by the way, it's a website for LD yoga school. They were ten versions of the homepage before we actually lend that on the homepage version that we want it. Because in the first version over here you can see that I added plants to the design. The client didn't really like that, so I deleted it, like you can see over here. And then we had a few discussions about the college because the client thought that this color was little bit too much pink. So that's why finally we ended up with a design that looked like this, where it's more like a red color. And also the titles were a little bit less harsh. So you can see how much the design changed in like a few weeks of going back and forth with the clients. And this is not really possible if you're working with elements or because if you click save and you close your website and the next day you come back, you can't really see that the last version, and of course you can create a duplicate of your homepage ten times. But that's not really a nice workflow, right? You want to see it like, hey, why is this version better than the other one? And sometimes it even happens that the client says, well, you know what? Let's come back to version number five. And then when you have already built version ten in element or that's a lot of work and z is just dragging the Leading a few things and you have a new page. Argument Number four, sometimes it happens that the client already has a website and they want an update. This is what I did for this website. You can see the old version of my client's website over here. And what's nice about it is that you can just screen salty old website as it is. You can import those images and then you can put your homepage next to the old version because you can just drag and our board like this and put it next to the new version that you've created. You can also send a picture of this to your clients so they can actually see the difference. But this is also nice for your design process because you can really see what things you need and what things you may want to remove. Argument Number five, you can start with inspiration. You can drag and inspiration in your Adobe QC and put that next to the airport that you're designing on. That's not possible in elementary. So for example, for this website, I had downloaded two designs from other websites that I liked. So I've just taken a screenshot of those websites that are found on the hands or on Dribble. I direct them into Adobe XD. And then I just tried to recreate some elements that my client liked about this website. And then I just made a different version in his stele. And then you could say like, yeah, well elements or has templates. Yes, well, a lot of good design is not found within the templates of elemental or on a template website, but from other designers on websites like Behance and dribble. So here you can work with a screenshot. You'll have to import a template. You don't have to buy a template. You can just import an image and work from that image. Argument Number six or even six, I think we're around six. You can make an inspiration board. This is what I also did for this client. So before I actually researched full screenshots for this website, I made an inspiration board and I send this inspiration boards my client. And then I told my client like, hey, what style do you want for your website? And then he said, well, I like the four and the six version for example. And then I knew what kind of stele he liked. And from there on I moved on. So z you can really easily make and our board like this and put a few pictures in it and send it to your clients. You can export this art board as an image and then send it in an email. So to sum this first part up, if you think you're faster by starting at element or you're actually not. Because in the design process that client doesn't know what they want from the start. You don't know what the client wants from the start. So if you can make those decisions upfront before you start an element or you're gonna save a lot of time. And yes, you have to do a little bit of preparation work, but at least you don't have to change the element or websites ten times. Because when I start in an element or build process, then I know that the website will almost not change. Maybe a few things here and there, but it's a really nice experience because if the client agrees to my design than I know what I have to build, I could just build it and, you know, not a lot will change. So for example, if your client says, well, I don't know if I want a block, you can say like Okay, I can make a design. You can look at it and then you can tell me what you want. Well, if you need to create a block inside of elemental, you have to create an archive page, and then you have to create a single block, both template and you have to connect those all together. It takes at least ten minutes, I would say, but in xsd it takes a few minutes. All you have to do is just create a block like this with the repeat griddle. Nothing has to work. You just make a screenshot of this and you send it to your client. And then they can say like, oh yeah, that's nice, I want that or I don't want that, right? So you won't waste any time by building and all the technical things that are required in WordPress. 3. What is a profesional design proces: Because in a professional design process you always have four steps. The first step is deciding what kind of pages you need. So the client may be says, well, we have one homepage, we have an about page, we have a portfolio page and a contact page. So that is step one, and this is very important to let your client decides what they want because then they have committed to that choice. And they know it's not very nice to start up the conversation if you've already built something. So that's the first step. Then step number two is the sketches. Create a sketch on paper or maybe on your iPad, something like I did in this video. Or you even create a wireframe like I've done for disclaim because this was a big project. So I really wanted to make sure that the client knew what he wanted before I even started to visual design and WordPress. So that's why I made a wireframe and I said to him like, Hey, do you like this idea that we first have this section and then you have a little bit of about. Then I explained to him like, Hey, this is my idea for a website. This is where your tourists come in because he sells tours and this doesn't take a lot of time because I don't have to worry about the colors. I don't really have to worry about defaults. I can just boot in all the content that I think that this website need. I can send this picture to my client and the client can design like, hey, do I like this structure or not? And if you don't use colors, they also cannot comment on the colors. You just have to say like, hey, this is just for the structure. Do you agree with this wireframe? And if they then say yes, then again for them is really hard to say no when you actually start building the website. So you just force them at the right moment to make the decisions for their website. And of course you can also help them. Of course, I'm not saying put all of the decisions on their site because you actually already make a lot of decisions when you design this wireframe, right? And then the next step is to actual visual design. So that's what I did for this website. I created a few different versions and that's what I put in his logo. I put in some images that he already had on his Google Drive. I put in some images of an splashed website and always used to get free images and are really made it feel real, but it's still a picture. It's just Adobe XD without having to worry about all the techniques. So for example, this, to create this in element or that's very hard because these blocks are connected to a custom post type. So then you have to install a lot of plugins. First of all, you have to have elemental protein, you have to custom post IVF, you have to have ACF, You have to have all those plugins to make this section. And in an an X-Y, It's just drag-and-drop, put in an image and then you're done. It doesn't have to work, but the client understands what it is before you actually build the website. So what I did is I exported all of the images for the most important pages and I put that in my Google Drive and send them the link. And then I say to them, if you agree to the design, then I will start building the website. Because if I start to build a website is very hard to change it later. So please make sure that you really think about the design. And only if you agree, then I will start to build a website and elemental. And again, this really forces them to really think about, is this really what I want? And if it's not what they want, it's really easy for me to change without having to worry about plug-ins or anything else. 4. Where XD is much faster: So if you still think now that you are fester by starting an element or then I really want to hear your arguments because I don't really agree with that. It's so much faster to design a website in Adobe XD that an element or, and I want to show you a few examples on how fastest is to design a website compared to element. Or first of all, if you want to start, you can just create a new art board, pretty easy. And you can start within ten seconds if you want to do that in element or you have to have hosting, you have to have a domain, something to put it on. You have to install element or an element or pro to actually start. And then you are ready one hour in before you actually designed your first pixel, right? Moving elements, you see how easy this is in Adobe x-iy. If you have to do with this in elements or you have to go into the margins and an embeddings and change all of that scaling titles. Just click and drag. If you want to do an element or you have to go and then through this towel and then to tea. And then to this scale o importing images. If you want to import a few images in a folder like this, you can just drag it in and then all those images are imported into the design. Now try that and elements are grouping elements. Sometimes you want to group elements because you're working on a design and you're moving things around. So it's really nice that you can group within a group. So you won't have to select all the elements all the time to move certain parts of your design. If you want to do this element or you have to think about the columns to sections, the intersections and is really complicated and z, that's just easy if you want to use custom fonts on elements or you have to go into the element or settings in an install that fonts in a settings, but in z, It's installed on your computer. You can just select it right inside of Ixy and works alignment grid. That's a big one in element or you don't really have those lines to make sure that all of your elements are aligned on the grids that you want. You don't even have a grid option. So those things are really handy when you're designing a website. If you want to know the space between certain elements, you can just click on an element hold Alt, and then you can see that there's 55 pixels between this title and this block. Super easy. And this is very important. If you want to keep your design consistent, you have to repeat Gretel, which makes it super easy. Adjust the size between elements. So for example, between the rows or between the columns. If you want to test with a menu on your homepage, if you're working with element or you have to create a header template and then you have to go back and forth into the elements to see if it actually works. And yes, you can technically just do it on your homepage, but then you have to do it again inside of elemental and z, you could just put in a header like this because it's just a prototype. Speaking about prototyping, that's also really easy. So if you click on prototype and you click on our board, you can link, for example, the links inside of a menu with other pages. So for example, if you want to link this button, the other page, you can just drag it like this and then you're done. You don't have to search for the page. It's all superficial. Oh, if you want to test with a webshop, for example, integrate d, you can just create a fake webshop like this. It doesn't have to work. You don't have to insult Woo Commerce to create something like this. It's just a few pictures, a few lines of text, and then you can test if this is what your client wants. And like I said, this is the same. If you want to create a blog, for example, or a portfolio page, you can do it without all the plugins. And of course, if you want to create a wireframe, that's also a really easily to deal in Adobe ICSI. So if you want to do this and elements or end users want to drag in a title or you want to drag in which a div element or element or has already applied certain colors. Steles, 2D elements that you drag in. So it's not a real wireframe because a wireframe with colors is actually not a wireframe. Well, you could call the wireframe, but colors impacts the quality that a wireframe can have on your process because it's a distraction. And lastly, I wanted to give you a few missing features that element or just doesn't have that HD has. First of all, the icons you can design an icon or an SVG fell and then export it and use it in elements or so. For example, I have this thing before the latest posts. So in x D, I could just select this, make it a group, and then export this as an SVG because those are just two lines created with the line feature. So I can export that as an SVG, which is a vector fell and I can use that factor fell inside of elemental or for example, this arrow. I can design this arrow with the blog and the triangle feature in z and then export this, which is a custom icon, and then use it inside of elementary. So that's a huge benefit because it's simply not possible in elementary, I can even make changes to vector icons. So I've downloaded icons from a website like flat icon, and then I've imported those SVG files into Adobe CQ C, and I can make adjustments. We didn't a Z to those SVG files. So I can come and click on this and move it a little bit to the right if I want it, or maybe this bird, I wanna move as I a little bit to the left. You can't really do that inside of elements or so in this way, you can make the icon's little bit more custom before you actually use it on the final website. And also you can import all of the images. They're real images that you want to use for the website before you actually upload them to WordPress. Because a lot of times what happens is that your client has photos that are one to small or way too big in terms of resolution. So what you can do is just create the, our boards with the exact sizes that you won't. Because I already knew that this image would not be bigger than 900 pixels in width, so that I create an art board, 900 pixels. I put a picture in and then I export all of those pictures at once with compression before I upload them to WordPress. And this keeps your website's super-fast and it's also nice to get an overview of all the images next to each other before you upload them to workers to see if they fit nicely. Maybe you want to change if a picture here and there in Photoshop before you start uploading it. So that's also a nice feature. And then one more thing. Sometimes you want to export images with art boards. So for example, I have this logo section right here on my client's website. But not all the images have the right size of padding inside of the images. So then when you just export those images and use them in sign of elements or element or doesn't know that the size between this one and needs to be bigger than this bigger logo. So what I then do is I create a few our boards and I make sure that I size the logos in the right way before I actually start exploiting it, I can even change the names of the art boards, which when I export is the actual name of the file. So in this way, I'm sure that my design looks good whenever I start working inside of elements or with a logo grid, for example. And there are probably a lot more features that are really nice in Adobe xy compared to element or, but I think I've made my point is very important to use a design to before you start building a website. And the most important one is you want to be able to make decisions, design decisions, compare things, let the client choose before you actually start building. Because changing things in element or like a blog, like a header, like all of the elements of a website are very hard to do, compare to XD inside of WordPress and element. 5. Thank you: So if you have anymore questions, then you can leave them down below in this glass. And if you want to learn more about Adobe XD, then you can click on my profile because I have a few classes about Adobe XD. So I hope that you will also enjoy those ones if you decide to watch them. And then I want to thank you for watching and maybe I will see you in another class for now. Bye.