 Thank you My name is Ivan and I'm a CEO of the company vibration and I'm here today for Speaking about the remote collaboration with the client or with your team or in your team. So Let's get Say something about me. I start the building website in 1999. So it is 20 years from now and it was HTML and CSS one and we use tables. So if you know this Way how to do websites you you you know the joke like Because you write everything everything in tables and souls and rows. So in this era is gone. So We start to build websites on PHP and then there are some There are some CMS like WordPress and I found work present. I think 2006 and in 2007 I built my first block which is Working right now. As you can see this spring screenings from today. So it's Update you need to update your work so you can have your work press for 10 years and more so from 2007 I'm building website on work work press and I will tell you something about the journey How I make Websites and which tools I used I start with corridor eight. I think maybe seven in 2000 I think and Then I found way into pro Then I start with Photoshop and I really enjoyed the Photoshop and the I Stay with Photoshop maybe for 10 years and maybe 10 out 10,000 hours of designing so Photoshop is my best tool for designing in that time and then I started building flash animations and flash Applications I use action script one Then I think five years ago. We start Building website and designing things in sketch and I thought that is the best thing for building websites and designing things and design custom templates So vibration is digital agency focused on WordPress and we are based in practice lava But a lot of our team members are not in practice lava So we are remote company and we use modern tools. So Today I want to tell you something about The modern tools we which we use and I picked two of them We try to Making website with the word press, but also we have our own Our own platform for e-commerce So in WordPress we use right now Gutenberg and we really enjoy WordPress API and right now We are focused on Vue.js. So front-end will Be in Vue.js in future websites and future templates. We also every time we make custom template and custom plugins so our clients are happy because it's really fast and and Why I'm here today. I want to tell you something about how to optimize your work How to speak with your client and team members and how to get feedback from the client and We want to be really productive. So if you are use designer web designer front-end programmer project manager or product owner or client you are in the right place so I I picked two of them to Pro softwares or maybe softwares services. They are online programs or services and first of first of it is Asana and Asana is content. It's a Collaborative tool for project management, but we use it for different things like to make specification with the client We also make Estimates inside of Asana. Also, we use reusable templates to to Define the the whole process of the project and every time we use project management Project management this Asana for me is a project management Tool one of the best of the all of the tools you can use Monday. You can use base camp You can use Trello. It's a little bit same But I think that Asana is the best and the faster for the also for the big projects also we use it for communication. So we we and to use emails and we try to to speak with the clients with the with just Asana so you don't miss your emails or some some communication So we need to wait Also We tried to have everything about the project in Asana. So All of the ideas change requests function requirements backtracking so When When you go to the project in Asana You see everything about the project and all whole communication in the in the project. We also put Put client to the workspace or project so you can speak with the with the client inside Asana also he can speak with the with the programmers and designers and you don't need to send emails or calls and things like this so I I can Show you the default process of us of our company. It's Like sales phase then is milestone of a preparation of the project You I think that you can see this but you can You can put your task into milestone. So this looks like waterfall and It is waterfall I think but you can see all phases in the project and the whole task in the phases so you can You don't you don't need to think about the next step or next phase in the project and you go one by one and you just check everything also Asana is good for support because the clients send you requests or bugs or some requirements to to a project and in Here we use different approach in this project. We have ideas to do doing and review and done so you can Go from different phases or milestones, but we use it like in Trello. So you can go with the task to different Step in the project Also, we use it for feedback and communication. So client Comment everything and you can ask client to give your feedback and give you feedback and We use it like send me print screen or upload upload your like Folders or or files Next next software is Figma and Most of this presentation will be about the Figma It in one sentence is Google Docs for designers. So if you can imagine You are working on the Program, it's online and you can you can see how your designer clicking and what he's doing and you can put How many designers we want into one art board or one one place? So it's really easy and really fast So let's go Into the Figma. So why framing is the process of making some sketch and to prototype the website and then we can make clickable prototypes and then we make designs and and Interaction things and then you can use for testing feedback and version control or for the programming so Why framing we used a paper it's the best way right now also and Then we switch to access your RP then we use Baza make then PowerPoint some clients and it in Excel also good good thing is Google drawings, but in Figma It's really easy and really fast and it's all online all the time So it's final version all the time and as you can see this is start of the project. So Here in this area I start with the sketching and then if you go closer You can see this will be Red Cross website building of build on web Sorry build in WordPress and here is Fireframe of the front page and maybe some sub pages sometimes you can go from the Different spec perspective and you don't need to go totally into the components, but you just write or Draw just the rectangles and you can speak with on Skype with your with your designer or with the with the client And you can sketch online and you can see the the mouse so it's really easy to be remote and remotely speak about maybe different or Next feature requirements requirements and also design Also, we use Asana for making prototypes. So the old way we used Asia RP or Photoshop or Sketch and then we export all the Design things into the envision any envisioned we made areas which are clickable and you can go you can make links to that to that areas so Right now and try I try I'll try the second microphone Okay, so live demo. I hope that it will work. So when When we speak about The wire framing I'm just click a it's really good to know The keyboard shortcuts because you will be faster than if you use paper So I just click are so I can make rectangle then you can copy it and make like normal form Then okay, I want to have call to action button. So I put some colors inside of it So right now I have the form You can make groups So it's really easy to sketch everything Then You can You can see here all the arbors are inside of the one place Let's look inside this So this is sketch of the of the pages Sometimes you can go deeper and it looks like this Sometimes it's Ready for the designing Here's some maybe interaction things and how how it how it will works and sometimes it's Really Up Like here. So this is the form or this is FAQ. So I know that there will be text, but there is no text right now so There is just preparation of the project then you can make Prototypes like this. So you can see all the Design for the website. This is profesia days, which is also based in WordPress and this will be redesigned I think in the future so You can send PNG or PDF files, but it's better to see prototypes like this Yeah, it's working. So It's clickable and it looks like the complete Application so the clients can see how it works. Okay, it is form. You can register. There is a QR code then you can Make some changes You can go back and What is really good inside of these? you You can send it to your client or to the clients Customers and he can he can then Realize how it works if it is fast if it is Reasonable and how it works and how it will works. So if he if the clients can't if he if the client want to make some changes, he just Click see and he wants to make this bigger. So he just write your comment write your comment so bigger heading So designer get feedback from the client from the prototype, but when you switch to the To the figma you can see it here so There is a if I click see I can see comments and I see this one and I can resolve it so I'm just go here and change the Text size there is a style so I can change it here and make it bigger, but there is no space So I leave it here like this and I can resolve the comments. So I said yes, it's okay Okay And here here it is so you can cooperate with the more people inside one one Artboard or one one project Then if you go Inside of designing things I need to wait here. Okay, I can see Here's a different product project and you can see there is also designed So it goes from maybe something like this like preparation some wireframing and In one project you can have everything and there is a design so you can go inside this and your programmer can check the code From the figma so we don't leave this the software so It's really easy So here is here it is you can find all of the all of the CSS things for For the programmer so you can see font family font style and everything he can measure How far some things are so if you build your custom Template you definitely try you want to be quick and Don't use different Softwares for things to cut the design. Okay, so here it is So it's like sketch, but it's online. So it's better than sketch Here it is It doesn't work. Okay Next project is like this you can see that It's really fast. It's online and they use cloud to To optimize the speed. So you don't need to have a fast computer or fast Graphic driver or graphic card. So it's really fast and you can have multiple multiple pages and multiple screens inside one project You can also make it you can also make a design system inside us as figma and Let's see if it works. I here is our our projects so from the May of this year we Done plenty of designs. So I'll try this one if it works As you can see we use it for comments, but I want to show you that after final final design contain Lot of comments Here I can switch to show resolved comments and these small pins blue pins and white pins are comments So in one page we cooperate with the designer and Make a lot of changes. So if I click see you can You can see how many times we change things inside the design but we don't need to send all the file all the files and all the print screens by email or Make some exports in envision. It's also Clickable so I can click here just play the prototype and Every time is when the client want to see the final design. He just opened the file. You can share also this this Edit view so I can send just link and I can say okay This is our team and I can send him just to view the things to not to change and I can send him email about okay, give me your feedback and Maybe Martin want to cut the design and make some changes. So I made the rights for the editing of the document and Programmers really like it because you can use it on Linux Mac or Windows So it's multi-platform. So it's the game changer for us because we don't need to have a lot of sketch licenses And we eat it just for free. It's Way how to do it? We don't need to use all I think it's also a change of our work because we we more we are more productive and we more we cooperate In daily basis and we comment everything and maybe more people are involved into the project. So it's really really Better and our designs are I think are better and the client is in In in the project from this from the beginning so he can see whole I think Whole process and how the things are built and it's easy to explain them Clients to the clients that how work it how long it takes and how what is what is Below it and They like it and they are they are really like commenting the designs. So it's like this so maybe I Can finalize my live demo with this This slide the last slide main reason why to use Asana Asana and Figma is because they are online. So they are really Really game-changers in the field of the web design and communication Figma is really Really best tool in this year, which I found so I really recommend it to everyone, but let's let's say Okay, why to switch from sketch or why to switch from Photoshop or Adobe XD because it's online. So it's the most valuable thing what I think and It's multifunctional. So you can use it for everything in in case of From start of the project to end of the project Then it's easy to learn if you know sketch or or Adobe XD. It's really easy to learn there is some Some shortcuts keyboard shortcuts. I will recommend you to learn that and It's free. So if you have one project or if you leave it in one project It's free and it's free for all of your users inside of the project So I think that you can you can put all of your company inside of the project Also, you can save money because you don't need to have using Photoshop Sketch or a extra or envision and It's online. It's fast and it's multi-platform. You can also download the application. So you can Have it like you can see I have the application But you can work also in Chrome or in Firefox. So it's online So that's it So what to do next try asana if you don't if you struggle you can live in trial, but try asana and if you are designer or you want to sketch some things try figma and And Maybe try to learn about design systems. It can be really faster when you use your libraries in the projects and try figma plugins There's there are here for maybe two months and I think that there will be future of development that you will Make like you can see Website in figma, but it is online if you can imagine that we just say that okay, let's Try to show this one I can zoom it here and I want to I want to change this heading from the database. I Think that the front-end the front-end programmers They will not have a lot of work because it's it's working like this. So I think it's future So I will see it in maybe two years that some Guys smart guys make some plugins and you will export figma things into the website. So This is the future So, thank you very much and if you have some questions, I will be here for a whole day and also an after party So you can ask me about the figma or asana. I will help you