I'm a 62 year old graphic/web designer. I started on a mac back in 1984. I really appreciate your content and your relaxed presentation style. Please keep it up. thanks
Do you remember at that time you were 26 years old? Isn't this the opposite of 62, which is your age now? I hope you are always productive and have good health. Kind regards from me
I just turned 50, and I often think I'm too old to still be a graphic designer. Hard to imagine myself at 60 doing this, but I said the exact same thing about 50 when I was 40. Great to see someone still going strong - I'm not nearly ready to hang it up!
The true tutorial on youtube should be like yours, the most awesome tutorial in the world! this saved my work, and day! thank you brother, keep it up, may God bless you.
Dude this video has totally revamped my entire design process and made things so much easier and faster for me. As sad as that is saying and as common sense as your points are, thank you for this video i needed it.
"Design First " method really works and give me bunch of cool layout ideas which I would never consider if I`m straight to fire up elementor or another page builder And in the end of project my knowledge about CSS and custom script increase significantly ( because some design or layout really need you to typing the codes)
I think that the idea is good, in theory. In actual practice, however, I don't see it being feasible based on my experience. The time that it takes to *develop* a website can start to add up based on client requests. Unless the client is willing to pay for all the extra time of mocking up and wireframing outside of Elementor, there's not a chance we'll do that. And from my experience, the general client is unwilling to pay market value for development, let alone pre-dev design work.
Mark Joseph Szymanski is there a plug-in to be able to see the whole page? Because this does seem like a lot of work. Sounds good in theory but who wants more work?
Me too, but XD is surprisingly easy to learn and I have learned it recently, not only the process is much faster, but it is also better for UI designing. Go give it a try.
I downloaded Adobe XD about 2 weeks ago after watching this video. After starting to design a new website in XD, I now understand the message of this video as follows : It is the same as an architect (Web designer) that makes a house plan which is then given to a builder (Web developer) to build the house. You don't have to be a Web developer to be a Web designer and visa versa, but you can be both too!
I am SO glad I found your videos. Some other guys talk forever and say nothing. You get right to the point, make it very clear, explain why you do what you do, and treat me like an intelligent person (which I am). I feel like those other vids drag on forever. I am new to Wordpress and Elementor, and now Xd. (I am an old school hand coder from way back). Your videos are saving me time, money, and give me the information I need at a pace I appreciate. It might be too fast for some, but those other guys put me to sleep and then I have to start watching them all over again. You are the best!
I just use pen and paper to draw out the layout and then use illustrator to create a mood board with the color palletes, icons, fonts, ect. and then i go into elementor to recreate what i've drawn using the design features from illustrator. haha. but i do 100% agree that creating a design first is key!!!
I really agree with your arguments. All my past website projects takes longer time because I had to redesign and find another needed plugins if my client want to change their previously-agreed design
I design/build with Divi and have been exploring this process with a tool like XD. I am nearly convinced that this is the way to go. For those of you who said that your clients don't pay enough to do a predesign...get better clients :)
Great video! My two cents - I'd argue it depends on the clients that you have whether or not you need to start in a prototyping tool. For example smaller clients who don't know design very well or trust you to make those decisions then starting out in Elementor is fine. Also, less back and forth is much better than more. Don't get that confused with effective communication, I think you can make a lot of those decisions and get feedback from with clients within early meetings rather than over emails during project. Just my thoughts! Keep up the great content :)
This is a great course. I appreciate now, building my web design in Adobe Xd. I have not build a website for many years and am now confident with my skills to make a start. You did an excellent job presenting each module. I love you style.
Oh my :) I'm new in these waters and I've built a page with very mixed content with Elementor pro, coworking with a graphic designer. It was a very hard project as I needed to learn all about WP, Elementor, plugins, etc., just to start. We were going back and forward all the time, making tons of headers, pages, etc., as we developed our idea because at first, as we didn't even know what we want. Showing it to our client back and forward all the time. Yes, they were understandable that it's something new for us. Adobe Xd would help us so much + we could have all the history of developing our site to this day. But hey! It will help us from now on! Thank you for this awesome content! You are amazing. I've watched a lot of videos, tutorials, but I didn't stumble upon this till today as information bombard me from all sides. Once again, thank you from my heart, as for now, this is all I can give you back!
This is just what I wanted. I have never wireframed before because I used to think it is time wasting, what with all the fantastic templates out there in elementor or ready to be purchased elsewhere. But I am now a convert to building outside elementor first because I like to be creative beyond what all these canned templates offer. Good job LivingWithPixels. You made your point so very well and it makes a lot of sense.
Awesome video. 100% of all the sites I've built, I start straight from Elementor. I knew practically it's right to first have a wireframe design but it just feels like additional work. Especially when working with low budget clients. But I'm going to learn everything I can about XD. I love the fact that you can customize icons from XD. Thanks once again!
This was an excellent and helpful video. I just start my first steps in wordpress and I never even thought about using XD for conceptional webdesign. Thanks a lot & keep up the good work. I will keep following.
I kind of agree. Elementor made huge steps forward. Today with global copy and so on. Still, I used XD after your video to create the overall design for a long onepager (not with everything aligned and only gray rectangles for the text blocks) to give the client a good overview of what will happen when. And she loved it & it saved me A LOT OF TIME doing so. Now my workflow is - 1. sketch 2. XD 3. approve of client 4. Elementor
Wonderful points! I always thought just like that! Before becoming block builders in elementor, we are Designers! And designers need to test! Before XD I used Illustrator, but XD is so much better! Thanks for the lessons, Rino! Greetings from Brazil!
I just started with Elementor really enjoying it. After watching this I can confidently say that you've saved me a lot of headache. It all makes perfect sense . Legend!
I think it comes down to experience. I first started using Elementor about 2-3 years ago. I know what I'm capable of creating with Elementor. Having XD now will allow me to make designs much faster (and changes) while still adhering to my knowledge of Elementor. Of course, I learn news things about Elementor as well, it's just that it makes so much sense what LivingWithPixels is saying in this video. I guess, in other words, don't make something in XD that you can't replicate in Elementor?
@@renearreola7812 that's true! If you master Elementor, then any project like adobe xd, figma, indesign etc is more than welcome. In my case, I work with great web designers who know nothing about Elementor. So, they send me the project and I replicate in Elementor. It's a win x win deal $$
I was thinking this. Although Rino is offering good sound advice, you have to understand the limitations of Elementor and the version you intend to use (free or pro) before you can confidently use XD etc. I can imagine making a big promise to the client based on what you have made in XD only to find it's not possible or will cost them more.
I absolutely agree with you. I am UX designer. I design and program website for a living and I'm always starting designing process with sketches and SketchApp. From your presentation XD looks easy to use as well. From the comments below it is clear to me why we have so many ugly, cheap and embarrassing websites. I understand we do our work to make money. But the design and user experience play an important role when we are building website and personal branding as well. Many companies figure it out so they start with UX process first. However, some freelancers are using quick solutions. It's also fine.
lets get real.. for a landing page in a google ads campaign.. you dont need a ux ui interface... aplies also for a site that always have home about contact etc. A mood board with the styles of the elements and a guide of the branding must be enough for a little site... adding ux ui, optimization, seo, additional functionalities like custom forms or traductions, etc for a starter site it is just too much work for a single designer it is most the cost than the bennefits. In real world rookie designers must be efficient if they wanna get clients. ux ui with elaborated interfaces applies for apps and super big sites. I have learned that if you arent flexible you are gonna suffer a lot without need
I'm so glad I found your video! I've been beating my head wondering why it's taking so long to build sites when Elementor Pro is so great. You clarified a lot and opened my eyes to the bottleneck that was holding up my progress.
When I got educated in design, one of my mentors used to put it like this: It is your responsibility as a professional to know the tools you are working with. Meaning that if you put features and designs in your pre-visualization that you (should) know aren‘t possible when building the website, that’s on you and not or at least not mainly on the software you are using. I guess with page builders most of the time it’s like a 95% accuracy you can achieve from pre-design to the real thing. Being aware of functionality’s helps getting it close to 100% tho.
Great overview, I struggled with Elementor before, and for the last 6 months did all my designs in Adobe XD first. It really is a much better experience for both myself and the client, and allows you to build real high quality websites.
I´ve been wanting to improve my web designing skills (I suck at it) and I was on the edge to whether or not to learn design web sites on Adobe XD but, after watching a few of your videos you convinced me to and, after watching this one I AM 100% SURE NOW!!
thanks for your content. I always wanted to work as web designer, but my career drove me to printing and branding. lately I have a bit more time on my hands (and I am bored of my job) so I wanted to get back into web. But I am one of prehistoric man that was doing web design layout using photoshop. AHAH I was using macromedia flash and my minimum resolution was 800x600 pixel in my 15 years of career I did learn one thing: the clients will always change their mind even if they agreed on something before. One of my clients decided to change a layout when I was printing the mockups for his product.
The problem is designing with the Elementor modules in mind. If you can freely design and perfectly recreate that design in Elementor, XD would make sense. However, if you are going to limit your imagination by the restrictions of Elmentor modules, then I would understand why some people may skip XD. This workflow while very practical may be better suited for a platform that allows you to use Div's like Webflow or are hand-coded. If you are designing for clients, then XD is a must as part of the approval process before you start developing.
I have started to learn XD recently, just out of curiosity and found out that it is a combination of Adobe's previous Apps - Indesign, fireworks, Photoshop etc . I have been doing the web mock up with fireworks before (just to show my clients what I am proposing). I also use a combination of Adobe's different Apps to do graphics (Photoshop, illustrator etc). Thanks Adobe for refining the process by bringing XD.
I was a Photoshop guy but I recently switched to XD to design a prototype. It is not only faster, but it is also better for UI and websites. You will master it in a day's time if you are coming from feature-rich Photoshop or Illustrator. Also, there are plugins to export the designs to HTML and Android XML which makes the development team's work far easier and quicker.
aandd again, I have alot to learn but this is the best video on web design. crazy. I build my own sites and I love using elementor but the main point was to vusually see my sigte before building it. and everything is in one place and make changes in a prototpe. Im considering building sites for small businesses and the "process" was very helpful. thank you.
You are amazing, we are adding or rather splitting our company to incorporate a UX/UI department and this video has gone a long way in helping me understand why and its importance esp being a frontend web developer & company overall! New Subbie
Wow! After designing websites in Elementor directly for 2 years. I can confidently say that this has been my missing piece. Thank you very much for sharing this video. Informative, instructional, and generally awesome.
Back in the day I only used Photoshop for making a web design and printed the design on a foamboard for presentation :-). Adobe XD is a great tool where you can even make a protoype of clicking through the pages. It's great for big projects, but for a small cheap website, you can easily design in Elementor of whatever sitebuilder you are using.
Good video, and to summarize: We design layouts upfront as it is design best practice that is expected of designers. Planning, creating a design systems, wireframing and prototyping saves you a ton of time having to do this in a live environment. To your point, designs goes through iterations and constantly change depending on content and client feedback. This would count as good design practices.
My struggle is when you a really nice design (like “floating images” “overlaps” and “offset” stuff that looks awesome in tools like this and then you paint yourself into a corner trying to translate that into css. Yeah. Good luck! Some are pretty difficult other close to impossible!
man, your videos have such a relaxing effect on me and at the same time i feel i am abetter designer and more productive just by watching your content. Keep this up! I love Adobe XD and Elementor!
Great advise from your videos as usual. I've switched from Elementor. I've started using WP Page Builder by Themeum... Almost all of the pro features of Elementor is in WP Page Builder for FREE. Amazing!
Yeah I totally agree with you, in order that I insisted a lot to my boss that I have to design with XD first. But it takes my lifelong time to convince him! I wish I'd seen this video before then I could send it to him!
Hey! I have a question, if I build websites with code, I always use XD. Because I know I can build everything. Elementor is limited and sometimes you are restricted to little things that will impact the design. If you used XD to show the design to the client, it is possible it isn't reachable, right ? How do you design stuff, you not 100% sure if it achievable? It is really annoying for the client to change the idea/plans while building. I know a lot is possible, but not always. Things like a sort by button is a part of the product archives widget. But what if I want another (filter) button next to it. It is not possible, because the sort button is a part of the widget that is full width.
This is exactly what i want to know ^^ if i make a website on adobe xd and then the client tell me what he want and when we are done there is a lot of thing that i cant do with elementor cause, yes elementor is good and easy but he cant personalise a website 100% its not like adobe xd
Great content. I totally agree with. I had headaches with one client because he wanted so many changes after he had agreed to the design made directly with Elementor. It doesn´t save time to start right away with Elementor. Another big problem: with WordPress, even installed locally, the workflow is soooooooo slow, because those waiting times till sites, plugins, or whatever have been loaded. A couple of workings steps in Adobe XD taking only 1 minute to do, could easily be 5 mins or more on your WordPress installment. So, I learned my lesson too, and am using one of those prototype tools.
Building in elementor only saves alot of time for me, since your video has been made, elementor now has global styles and an improved template library. Making changes or reverting back to versions is done in a matter of clicks. What makes it even better is when you have a huge library of templates, sections and modules that you created from previous websites and there's even a plugin where you can copy the template/section from one site to another :)
I kind of agree. Elementor made huge steps forward. Today with global copy and so on. Still, I used XD to create the overall design for a long onepager (not with everything aligned and only gray rectangles for the text blocks) to give the client a good overview what will happen when. And she loved it, it saved me A LOT OF TIME doing so. Now my workflow is - 1. sketch 2. XD 3. approve of client 4. Elementor
This video was A MA ZING!!! The step by step, all the examples and the reality check of why this is the best method to a design flow... wow I'm amazed! I wish I could like & subscribe 1000 times cause A plus right here 👏👏
Wireframes are helpful for designers, but more importantly, it helps the client focus on the content instead of being distracted by the "look". Very effective :)
4 роки тому+3
When you talk about installing plugins on elementor, you also can make a sample list of things in elementor to show to client and then implement if he is agree with that.
Great Presentation! I really like that you think of the design conception and review BEFORE ever coding or building anything - Very few people do this!
You have to design the website in tools like Adobe XD period. This is where you make your crucial decisions about typography, color, and style. If you skip this first crucial step, you'd be developing some gobbledygook bloatware.
your recommendation is very useful and easy to understand what are you talking about.........awesome.....keep going....i need to watch all of your videoclips, thanks for your contribution.
Wise words...... I started "building wordpress websites" with elementor 2 years ago, and I had to learn this lesson on the field (I will remove the quotes when I'll be able to code a theme from scratch and quit elementor). As someone else already said in the comments, starting with a sketch, with pencil and paper is the best thing. After that you can use adobe xd, figma, invision, or even photoshop. But starting with Elementor is one of the worst thing you can do. It's not a matter of time or resources, unless you are the Fiverr boy/girl that sells Elementor sites for 10 dollars. If you know your tools, it's quite easy to build a collection of "starting points" for the basic templates of a wordpress site. And starting from them you can create variations, expand.... with a design, that can act as a mockup, it's also a lot easier to interact with clients. During a metting you can also change things on the fly, if needed, to show different solutions... something that with Elementor is more difficult and less elegant....
Great information which I never thought it, dealing with clients may not be easy. I totally agreed with you, I have learned Adobe Xd but never make use of it.
Problem is that you might design stuff that isn't possible or is quite tricky, you need to know the possibilities with elementor and what you'll need to add to get that style/functionality to work. Definitely pre-agreed design before building is best practice and any additional changes come at a further charge otherwise they'll keep asking for tweak here a tweak there. Time = money
I think that every person will use this program in their own special way. One will be just developer and another one an artist. I think if we want to create more abicious projects, this thing is a great option!
My problem is that if i design it first outside of elementor, Im afraid that I'll create a look or element that I cant actually create once I get into Elementor, then Im in trouble because the client is already sold on it and signed off?!
You're doing fantastic! I gained a lot of knowledge through this video. I'm new to the design world - website designing and building to be specific. Keep up the good work! :)
What is the best theme to start a wordpress project with? The options in the admin panel are very important to me. So what theme do you recommend. A tutorial on how to build a design from scratch in Adobe Xd would be great. Keep up the good work. I like this chanel, it helps me a lot.
Great video Rino. My problem is to transfer the xd work to Elementor. Sometimes it doesn't fit with paddings margins etc. Your tip use a artboard to change images to right size maybe helps.
In case you didn't find out yet: Elementor has in-built CSS and in-built margins and paddings. You need first to either set up your XD grid the same way as Elementor does or the other way round (you can do that in the theme settings for Elementor Pro in the grid paddings). Natively I believe XD uses a bootstrap grid (haven't worked with it in ages). For horizontal paddings you can change them to 0 if you want Full control, but that means you have to put a padding in every.single.element.
I'm a 62 year old graphic/web designer. I started on a mac back in 1984. I really appreciate your content and your relaxed presentation style. Please keep it up. thanks
You sir are a real history, planning on making a video about how people making websites back then?
Glad to share this profession with someone as experienced. Would be awesome to hear about your professinal journey and advices, sir.
I would also like to know, how hard would it be to create a website with no tools. Just thinking of it makes me inspiring.
Do you remember at that time you were 26 years old? Isn't this the opposite of 62, which is your age now? I hope you are always productive and have good health. Kind regards from me
I just turned 50, and I often think I'm too old to still be a graphic designer. Hard to imagine myself at 60 doing this, but I said the exact same thing about 50 when I was 40. Great to see someone still going strong - I'm not nearly ready to hang it up!
Step 1: Sketches, Step 2: Wireframe, Step 3: Design, Step 4: Development, Step 5: Test, Step 6 Launch
Step zero: plan :)
Step -1: requirements
Step 7 - Test UX and SEO performance
Development consists of Database Design, Query Optimization, Server Setup and Configuration, DevOps, Secure Coding, etc.
Old process :D
I am new to web design and I've been using Elementor Pro. This video just taught me a lottttt, thank you so much!
The true tutorial on youtube should be like yours, the most awesome tutorial in the world! this saved my work, and day! thank you brother, keep it up, may God bless you.
I'm just getting started with my website and in the last 15 min of finding your channel I feel way more confident. Thank you for your content!
Dude this video has totally revamped my entire design process and made things so much easier and faster for me. As sad as that is saying and as common sense as your points are, thank you for this video i needed it.
"Design First " method really works and give me bunch of cool layout ideas which I would never consider if I`m straight to fire up elementor or another page builder
And in the end of project my knowledge about CSS and custom script increase significantly ( because some design or layout really need you to typing the codes)
I think that the idea is good, in theory. In actual practice, however, I don't see it being feasible based on my experience. The time that it takes to *develop* a website can start to add up based on client requests. Unless the client is willing to pay for all the extra time of mocking up and wireframing outside of Elementor, there's not a chance we'll do that. And from my experience, the general client is unwilling to pay market value for development, let alone pre-dev design work.
Exactly! give this man a medal! I came to the comment section looking for this.
I agreed with you. Something the best is go directly to elementor
Agreed
Sad but true
Mark Joseph Szymanski is there a plug-in to be able to see the whole page? Because this does seem like a lot of work. Sounds good in theory but who wants more work?
I’m an old school photoshop guy and I never thought about Adobe XD for this part of the process. this is really eye-opening and inspiring. thanks!
Me too, but XD is surprisingly easy to learn and I have learned it recently, not only the process is much faster, but it is also better for UI designing. Go give it a try.
I downloaded Adobe XD about 2 weeks ago after watching this video. After starting to design a new website in XD, I now understand the message of this video as follows : It is the same as an architect (Web designer) that makes a house plan which is then given to a builder (Web developer) to build the house. You don't have to be a Web developer to be a Web designer and visa versa, but you can be both too!
I am SO glad I found your videos. Some other guys talk forever and say nothing. You get right to the point, make it very clear, explain why you do what you do, and treat me like an intelligent person (which I am). I feel like those other vids drag on forever. I am new to Wordpress and Elementor, and now Xd. (I am an old school hand coder from way back). Your videos are saving me time, money, and give me the information I need at a pace I appreciate. It might be too fast for some, but those other guys put me to sleep and then I have to start watching them all over again. You are the best!
I just use pen and paper to draw out the layout and then use illustrator to create a mood board with the color palletes, icons, fonts, ect. and then i go into elementor to recreate what i've drawn using the design features from illustrator. haha. but i do 100% agree that creating a design first is key!!!
I really agree with your arguments. All my past website projects takes longer time because I had to redesign and find another needed plugins if my client want to change their previously-agreed design
I design/build with Divi and have been exploring this process with a tool like XD. I am nearly convinced that this is the way to go. For those of you who said that your clients don't pay enough to do a predesign...get better clients :)
Great video! My two cents - I'd argue it depends on the clients that you have whether or not you need to start in a prototyping tool. For example smaller clients who don't know design very well or trust you to make those decisions then starting out in Elementor is fine. Also, less back and forth is much better than more. Don't get that confused with effective communication, I think you can make a lot of those decisions and get feedback from with clients within early meetings rather than over emails during project. Just my thoughts! Keep up the great content :)
you made my day! thank you!
This is a great course. I appreciate now, building my web design in Adobe Xd. I have not build a website for many years and am now confident with my skills to make a start. You did an excellent job presenting each module. I love you style.
Oh my :) I'm new in these waters and I've built a page with very mixed content with Elementor pro, coworking with a graphic designer. It was a very hard project as I needed to learn all about WP, Elementor, plugins, etc., just to start. We were going back and forward all the time, making tons of headers, pages, etc., as we developed our idea because at first, as we didn't even know what we want. Showing it to our client back and forward all the time. Yes, they were understandable that it's something new for us.
Adobe Xd would help us so much + we could have all the history of developing our site to this day. But hey! It will help us from now on!
Thank you for this awesome content! You are amazing. I've watched a lot of videos, tutorials, but I didn't stumble upon this till today as information bombard me from all sides.
Once again, thank you from my heart, as for now, this is all I can give you back!
This is just what I wanted. I have never wireframed before because I used to think it is time wasting, what with all the fantastic templates out there in elementor or ready to be purchased elsewhere. But I am now a convert to building outside elementor first because I like to be creative beyond what all these canned templates offer. Good job LivingWithPixels. You made your point so very well and it makes a lot of sense.
Awesome video. 100% of all the sites I've built, I start straight from Elementor. I knew practically it's right to first have a wireframe design but it just feels like additional work. Especially when working with low budget clients.
But I'm going to learn everything I can about XD. I love the fact that you can customize icons from XD.
Thanks once again!
This was an excellent and helpful video. I just start my first steps in wordpress and I never even thought about using XD for conceptional webdesign. Thanks a lot & keep up the good work. I will keep following.
I kind of agree. Elementor made huge steps forward. Today with global copy and so on. Still, I used XD after your video to create the overall design for a long onepager (not with everything aligned and only gray rectangles for the text blocks) to give the client a good overview of what will happen when. And she loved it & it saved me A LOT OF TIME doing so.
Now my workflow is -
1. sketch
2. XD
3. approve of client
4. Elementor
Because of this video, I completely changed my creative process. Thank you so much for sharing knowledge!
Wonderful points! I always thought just like that! Before becoming block builders in elementor, we are Designers! And designers need to test!
Before XD I used Illustrator, but XD is so much better!
Thanks for the lessons, Rino! Greetings from Brazil!
I just started with Elementor really enjoying it. After watching this I can confidently say that you've saved me a lot of headache. It all makes perfect sense . Legend!
Starting from 4:16 tackles my concern for the existing website update exactly, thanks for the clear breakdown and kind sharing! GOOD JOB!
the only thing I worry about when designing in XD is that i wont be able to recreate it in elementor. That's the only thing.
I think it comes down to experience. I first started using Elementor about 2-3 years ago. I know what I'm capable of creating with Elementor. Having XD now will allow me to make designs much faster (and changes) while still adhering to my knowledge of Elementor. Of course, I learn news things about Elementor as well, it's just that it makes so much sense what LivingWithPixels is saying in this video. I guess, in other words, don't make something in XD that you can't replicate in Elementor?
@@renearreola7812 that's true! If you master Elementor, then any project like adobe xd, figma, indesign etc is more than welcome. In my case, I work with great web designers who know nothing about Elementor. So, they send me the project and I replicate in Elementor. It's a win x win deal $$
Major for presentations to the clients.
I was thinking this. Although Rino is offering good sound advice, you have to understand the limitations of Elementor and the version you intend to use (free or pro) before you can confidently use XD etc. I can imagine making a big promise to the client based on what you have made in XD only to find it's not possible or will cost them more.
Absolutely my concern too! I’m literally right at the stage of loading up Elementor for my first build or now quickly learning Figma 😬
Cannot argue. You deserve like, comment and donation. Thank you for your Fantastic work! Your chanel is a perfect tool to learn.
Same here! I design/mockup first on XD before developing it in Elementor. Saves me time from client changes 🙌🏻
I absolutely agree with you. I am UX designer. I design and program website for a living and I'm always starting designing process with sketches and SketchApp. From your presentation XD looks easy to use as well. From the comments below it is clear to me why we have so many ugly, cheap and embarrassing websites. I understand we do our work to make money. But the design and user experience play an important role when we are building website and personal branding as well. Many companies figure it out so they start with UX process first. However, some freelancers are using quick solutions. It's also fine.
lets get real.. for a landing page in a google ads campaign.. you dont need a ux ui interface... aplies also for a site that always have home about contact etc. A mood board with the styles of the elements and a guide of the branding must be enough for a little site... adding ux ui, optimization, seo, additional functionalities like custom forms or traductions, etc for a starter site it is just too much work for a single designer it is most the cost than the bennefits. In real world rookie designers must be efficient if they wanna get clients. ux ui with elaborated interfaces applies for apps and super big sites. I have learned that if you arent flexible you are gonna suffer a lot without need
I'm so glad I found your video! I've been beating my head wondering why it's taking so long to build sites when Elementor Pro is so great. You clarified a lot and opened my eyes to the bottleneck that was holding up my progress.
Really nice to hear. That was exactly my goal with this video.
Thank you, Rino! But, while creating a design on XD, how can you be sure that some elements are not outside of Elementor functionality?
When I got educated in design, one of my mentors used to put it like this: It is your responsibility as a professional to know the tools you are working with. Meaning that if you put features and designs in your pre-visualization that you (should) know aren‘t possible when building the website, that’s on you and not or at least not mainly on the software you are using. I guess with page builders most of the time it’s like a 95% accuracy you can achieve from pre-design to the real thing. Being aware of functionality’s helps getting it close to 100% tho.
Great overview, I struggled with Elementor before, and for the last 6 months did all my designs in Adobe XD first. It really is a much better experience for both myself and the client, and allows you to build real high quality websites.
and you get paid by adobe too ? or just not creative enough with elementor ?
I´ve been wanting to improve my web designing skills (I suck at it) and I was on the edge to whether or not to learn design web sites on Adobe XD but, after watching a few of your videos you convinced me to and, after watching this one I AM 100% SURE NOW!!
I think an 1+ hour long Adobe XD tutorial for Web Designers is coming up?
Thats awesome to hear. Great that you see the value now. I will make more video’s about xd this summer.
@@rinodeboer pls do so especially on windows & also share the short cut keys to on the same.
thanks for your content. I always wanted to work as web designer, but my career drove me to printing and branding. lately I have a bit more time on my hands (and I am bored of my job) so I wanted to get back into web. But I am one of prehistoric man that was doing web design layout using photoshop. AHAH I was using macromedia flash and my minimum resolution was 800x600 pixel
in my 15 years of career I did learn one thing: the clients will always change their mind even if they agreed on something before. One of my clients decided to change a layout when I was printing the mockups for his product.
I’ve been working on 3 websites right now but this saved my life. Thank u!
You convinced me. I'm stubborn and didn't want to use XD. You made me change my mind with this video. Great content, congratulations.
The problem is designing with the Elementor modules in mind. If you can freely design and perfectly recreate that design in Elementor, XD would make sense.
However, if you are going to limit your imagination by the restrictions of Elmentor modules, then I would understand why some people may skip XD.
This workflow while very practical may be better suited for a platform that allows you to use Div's like Webflow or are hand-coded.
If you are designing for clients, then XD is a must as part of the approval process before you start developing.
Am new to wordpress and I already love your design process. Thank you very much!!
I found your video today. For me who use english as my 3rd language, your explanation is very very clear. Thank you for helping me.
I have started to learn XD recently, just out of curiosity and found out that it is a combination of Adobe's previous Apps - Indesign, fireworks, Photoshop etc . I have been doing the web mock up with fireworks before (just to show my clients what I am proposing). I also use a combination of Adobe's different Apps to do graphics (Photoshop, illustrator etc). Thanks Adobe for refining the process by bringing XD.
You are so right! Thank you for confirming this. Your Adobe XD skills are killer. Keep it up!
I was a Photoshop guy but I recently switched to XD to design a prototype. It is not only faster, but it is also better for UI and websites. You will master it in a day's time if you are coming from feature-rich Photoshop or Illustrator. Also, there are plugins to export the designs to HTML and Android XML which makes the development team's work far easier and quicker.
Very good, congratulations! I am learning XD and Elementor and I didn´t have think about this process in some many datails
Xd is not always practical for clients on a budget, but this video does inspire me to use it on some framework redesigns I am doing. Nice video.
aandd again, I have alot to learn but this is the best video on web design. crazy. I build my own sites and I love using elementor but the main point was to vusually see my sigte before building it. and everything is in one place and make changes in a prototpe. Im considering building sites for small businesses and the "process" was very helpful. thank you.
Thanks Internet that put this AWESOME channel in my life
Same!
@@ezbraun Same! Same!
You are amazing, we are adding or rather splitting our company to incorporate a UX/UI department and this video has gone a long way in helping me understand why and its importance esp being a frontend web developer & company overall! New Subbie
You are very talented. I have designed hundreds of web sites and I have never played with XD, but I'm downloading it now!
You absolutely convinced me to always use this method in just 15 minutes... Good job. :)
Wow! After designing websites in Elementor directly for 2 years. I can confidently say that this has been my missing piece. Thank you very much for sharing this video. Informative, instructional, and generally awesome.
Back in the day I only used Photoshop for making a web design and printed the design on a foamboard for presentation :-). Adobe XD is a great tool where you can even make a protoype of clicking through the pages. It's great for big projects, but for a small cheap website, you can easily design in Elementor of whatever sitebuilder you are using.
Good video, and to summarize: We design layouts upfront as it is design best practice that is expected of designers. Planning, creating a design systems, wireframing and prototyping saves you a ton of time having to do this in a live environment. To your point, designs goes through iterations and constantly change depending on content and client feedback. This would count as good design practices.
Very helpful - you have got me looking forward to the design process and introduced me to helpful software. Huge thanks.
Great video. Not thought about using XD to standardise image/logo sizes. I really like that idea!
This video has given me soo many ideas for my design process. Thank you! Great video!
Thank you so much for your comprehensive video. Very very good points and makes so much sense 👍
My struggle is when you a really nice design (like “floating images” “overlaps” and “offset” stuff that looks awesome in tools like this and then you paint yourself into a corner trying to translate that into css. Yeah. Good luck! Some are pretty difficult other close to impossible!
Amazing video. Cleared lots of queries I had for designing a website. Thanks a lot
You're content is awesome and has been super helpful learning how to design on Wordpress without code. Much appreciated! Keep it up!
man, your videos have such a relaxing effect on me and at the same time i feel i am abetter designer and more productive just by watching your content. Keep this up! I love Adobe XD and Elementor!
That’s a huge compliment for me. Thanks so much 🙏🏻
There is so much valuable information in this video wth. I need to watch this again haha. Thanks bro!
Great advise from your videos as usual.
I've switched from Elementor. I've started using WP Page Builder by Themeum... Almost all of the pro features of Elementor is in WP Page Builder for FREE. Amazing!
Wow that's going backwards....
Yeah I totally agree with you, in order that I insisted a lot to my boss that I have to design with XD first. But it takes my lifelong time to convince him! I wish I'd seen this video before then I could send it to him!
I'm a starter and you are helping me with lots of little details. Thanks
Hey! I have a question, if I build websites with code, I always use XD. Because I know I can build everything. Elementor is limited and sometimes you are restricted to little things that will impact the design. If you used XD to show the design to the client, it is possible it isn't reachable, right ?
How do you design stuff, you not 100% sure if it achievable? It is really annoying for the client to change the idea/plans while building. I know a lot is possible, but not always. Things like a sort by button is a part of the product archives widget. But what if I want another (filter) button next to it. It is not possible, because the sort button is a part of the widget that is full width.
This is exactly what i want to know ^^ if i make a website on adobe xd and then the client tell me what he want and when we are done there is a lot of thing that i cant do with elementor cause, yes elementor is good and easy but he cant personalise a website 100% its not like adobe xd
Yeah I agree, I actually prefer coding my own websites over the page builders because of that
good comment! I want to start coding my own pages, would you recommend me the good software to use?
Great content. I totally agree with. I had headaches with one client because he wanted so many changes after he had agreed to the design made directly with Elementor. It doesn´t save time to start right away with Elementor. Another big problem: with WordPress, even installed locally, the workflow is soooooooo slow, because those waiting times till sites, plugins, or whatever have been loaded. A couple of workings steps in Adobe XD taking only 1 minute to do, could easily be 5 mins or more on your WordPress installment. So, I learned my lesson too, and am using one of those prototype tools.
Building in elementor only saves alot of time for me, since your video has been made, elementor now has global styles and an improved template library. Making changes or reverting back to versions is done in a matter of clicks.
What makes it even better is when you have a huge library of templates, sections and modules that you created from previous websites and there's even a plugin where you can copy the template/section from one site to another :)
I kind of agree. Elementor made huge steps forward. Today with global copy and so on. Still, I used XD to create the overall design for a long onepager (not with everything aligned and only gray rectangles for the text blocks) to give the client a good overview what will happen when. And she loved it, it saved me A LOT OF TIME doing so.
Now my workflow is -
1. sketch
2. XD
3. approve of client
4. Elementor
Hi! Where can I find template libraries sections and modules? I mean something without content included unlike envato templates
U THE BEST MAN! NICE TALKING AND SO CLEAR ALL! I WILL START WITH XD FROM THIS MOMENT BEFORE CREATE IN ELEMENTOR. SAVE A LOT OF TIME WORKING, THANKS
Very comprehensive information and I really like the way you give it, dunno how 😄
Great job
This video was A MA ZING!!! The step by step, all the examples and the reality check of why this is the best method to a design flow... wow I'm amazed! I wish I could like & subscribe 1000 times cause A plus right here 👏👏
Verdade, meu nível de webdesign vai aumentar muito daqui pra frente
Dope video! I've now realised the benefits of using Adobe Xd, but please don't start it with "You should NEVER.." almost made me close the video.
Wireframes are helpful for designers, but more importantly, it helps the client focus on the content instead of being distracted by the "look". Very effective :)
When you talk about installing plugins on elementor, you also can make a sample list of things in elementor to show to client and then implement if he is agree with that.
Great video I stumbled on here. You made so many excellent points and kept the tone fun and engaging. Subscribed.
Great Presentation! I really like that you think of the design conception and review BEFORE ever coding or building anything - Very few people do this!
You have to design the website in tools like Adobe XD period. This is where you make your crucial decisions about typography, color, and style. If you skip this first crucial step, you'd be developing some gobbledygook bloatware.
Would love to see a tutorial on how to build a webshop on Elementor from you!!
your recommendation is very useful and easy to understand what are you talking about.........awesome.....keep going....i need to watch all of your videoclips, thanks for your contribution.
Love the artboard image size tip. Very smart.
Wise words......
I started "building wordpress websites" with elementor 2 years ago, and I had to learn this lesson on the field (I will remove the quotes when I'll be able to code a theme from scratch and quit elementor). As someone else already said in the comments, starting with a sketch, with pencil and paper is the best thing. After that you can use adobe xd, figma, invision, or even photoshop. But starting with Elementor is one of the worst thing you can do. It's not a matter of time or resources, unless you are the Fiverr boy/girl that sells Elementor sites for 10 dollars.
If you know your tools, it's quite easy to build a collection of "starting points" for the basic templates of a wordpress site. And starting from them you can create variations, expand.... with a design, that can act as a mockup, it's also a lot easier to interact with clients. During a metting you can also change things on the fly, if needed, to show different solutions... something that with Elementor is more difficult and less elegant....
Dude your videos save me SO MUCH TIME! I wish we had content like this when I was going to college 10 years ago. I would've just dropped out hahaha!
This is exactly what I was looking for! The video is so thorough! You're the absolute best
Thank you for your valuable insight. I learned Elementor first and now I've learned XD and Figma. I will never go straight to Elementor again.
This info is exactly what I was looking for and more. Thank you!!
Great information which I never thought it, dealing with clients may not be easy. I totally agreed with you, I have learned Adobe Xd but never make use of it.
Quality content, as always! Feels like a proper course!
You're killing the game. THANK YOU for this so much
Eye opener! Thanks man, ga dit gelijk toepassen in m'n dagelijkse workflow!
Problem is that you might design stuff that isn't possible or is quite tricky, you need to know the possibilities with elementor and what you'll need to add to get that style/functionality to work.
Definitely pre-agreed design before building is best practice and any additional changes come at a further charge otherwise they'll keep asking for tweak here a tweak there. Time = money
Brilliant overview on the use of Xd. I will be implementing this into my workflow right away. ✌️
Easy to follow presentation style. Thank you for posting.
I think that every person will use this program in their own special way. One will be just developer and another one an artist. I think if we want to create more abicious projects, this thing is a great option!
Literally speechless. Most helpful video I've seen in a long time.
Excellent video!! You are totally right, it’s really professional work in that way.
My problem is that if i design it first outside of elementor, Im afraid that I'll create a look or element that I cant actually create once I get into Elementor, then Im in trouble because the client is already sold on it and signed off?!
This is an awesome video with great guidelines! You are a real pro!
You're doing fantastic! I gained a lot of knowledge through this video. I'm new to the design world - website designing and building to be specific. Keep up the good work! :)
It's such a pleasure to watch your clips! Thank you! :)
What is the best theme to start a wordpress project with? The options in the admin panel are very important to me. So what theme do you recommend. A tutorial on how to build a design from scratch in Adobe Xd would be great. Keep up the good work. I like this chanel, it helps me a lot.
Great video Rino. My problem is to transfer the xd work to Elementor. Sometimes it doesn't fit with paddings margins etc. Your tip use a artboard to change images to right size maybe helps.
Exactly, what I'm looking for. Let me know if you got any idea.
In case you didn't find out yet: Elementor has in-built CSS and in-built margins and paddings. You need first to either set up your XD grid the same way as Elementor does or the other way round (you can do that in the theme settings for Elementor Pro in the grid paddings). Natively I believe XD uses a bootstrap grid (haven't worked with it in ages). For horizontal paddings you can change them to 0 if you want Full control, but that means you have to put a padding in every.single.element.