 Thank you for coming to my talk. My name is Anastasia Dimoshuk and this talk actually was designed and created by two cost speakers and unfortunately the second cost speaker couldn't come today but I will present also her part. I will do my best. So here is the link. You can follow the presentation slides and also use all the links because all the slides are equipped with all the links to some sources with more information and maybe to some free advices which you can use later and with all the pictures and examples and everything. So what is the talk about? How many of you have any ideas which you want to present? Just give me some hints. Okay. Maybe some projects or maybe some features. It doesn't matter. If you have any idea and you want to present it to somebody, for example your chief or CEO or CEO or somebody who even is not a technical person, then probably you need to have some skills of presentation and everything. It's not just of presenting some slides. It's about showing your idea and developing it further. And if you have some idea and you are stuck with that or you don't know how to go with it, so probably it's the right place to sit. Actually in my experience I had the problem when together with a team of 10 people we created the amazing backend. It was super great. It was working perfectly. It was saving hours and hours of working time. So it was saving like two hours per day per developer for the team of 500 people. That's a lot, I would say. And also we presented that project with amazing backend and some kind of no-frontend, no-UI to our customer and we said, hey, you can just see URL and just get the results and get everything done and then you will get the file with all the results. And he said, yeah, but there is another team and they are presenting kind of the same so they're working in the same field. Yeah, you don't know about them, but they showed us amazing UI, amazing thing. Yeah, they don't have backend, but they will probably win because they have something which you can click and then you will get something. And we said, yeah, yeah, yeah, wait, we will do our job. We will do everything in a week and then, yeah, we speed up. We were working hard and making as much as we can and we presented also UI, so we kind of won that battle, but sometimes you would be in the place when you cannot really have the second chance. So you got the idea, you got the feeling that it's something which will be super great, which will save all the time which you can help with all the developers, but then you cannot present it fine. You cannot show it and then you are failing. I will help you with that. I will help you to create your idea from just raw idea to the architecture design. So let's start. First of all, I would like to tell you some words about my company because they are supporting me a lot also in my skills and also developing myself. So it's a Siren, it's an internet security company. I will show you some short video about the company. Maybe you saw it already in the previous session. Siren is developing a system as a service, send a solution for business companies. We are on the cloud. We are parsing all the emails from our partners and then saying if it's form or not, vision or everything and as everything is on the cloud, so we are as fast as it could be and if there is a new attack already live, then it's taking usually some minutes or maybe maximum hours to fix it and then it's live for all the speakers and sorry for the speakers, for all the people which are using our services. So it's really nice to have such a speed because some old solutions where you need to install all the software on your company's servers, then it will take ages and ages to update and to get those updates and then install and everything. So it's not really so fast as it should be nowadays. We have different services for anti-spam solutions to check the emails and also to answer the customers. We have some of our inside internal tools which I'm developing currently and during my daily tasks, I'm dealing a lot with designing some new ideas and then I need to present it to sometimes to my colleagues, sometimes to my boss and then to make him believe that my idea, my feature will work and even if I will show him amazing architecture but it will be just some short schema, he will say that might not work and then I'm trying to do my best to keep up with all the technologies and everything and then they are accepting more times, my talks and my ideas. So what's in the talk? We will start with some basic concepts, then we will visualize the idea, we will take one simple example to show everything and see how to develop it. Then we will talk a little bit about visual style and then we will go a bit deeper to object oriented analysis and design approach and then just jump to some conclusions. So let's dive into basics. What is the design? Design as you can read everywhere, it's just creation of some plan of an object which you can think in your mind so it's like a representation of the object. What is the visual design? Is the visual representation somewhere on the media, maybe in some photos, pictures, some mock-ups and everything? What is software design? It's a special design for creating of a new software. What is architecture? Architecture is also a process and a product of creating some plans and some schemas and some design steps. How will the product will look like? What is software architecture? It's mostly about software, about creating the software and creating some schemas only about the software, how it's going to work. So building software architecture is always about trade-offs. As you can see, I have this huge list of system quality attributes. And if you will fulfill all of them, I have written just a few of them. So if you will fulfill all of them, it will take years to build such a solution. It will be so expensive and time-consuming and you need 1,000 million developers to fulfill that. And I'm not sure that it's even possible to fulfill all of the requirements. So building of the software, it's always about trade-offs. Depending on how much resources and time you have, it will be a different architecture and different software. For example, if you are running out of time and you need to run it as soon as possible, then you will probably take something smaller, maybe some smaller features, some shorter features. And maybe you will go to monolith structure. If not, maybe you will go further into some microservices or just services. So it's always about trade-offs. So let's start. Here, as you can see at the photo, it's a working place of visual designer. Actually, it's a place of my second cost speaker. Let's try to build the idea based on some example. Then you will see how is it going to work. How many of you have swapped something like clothes or jobs or whatever? Homes, working places? Did you swap something? Yeah. OK. But actually, it's really, really popular. I searched on the internet and the job swap idea, it's not really well-developed. So for example, you are working as a Python developer. But actually, you were always dreaming to be a Python keeper. You want to take care of pythons or maybe gorilla, so maybe some other activities. Maybe you wanted to make tea in your life. But actually, you are a software developer, so you cannot really go there and just work as a zookeeper. You cannot just switch. So that's the idea, to switch for one single day just to try yourself if you will work in this area and if you need to speed up with learning of something new. It's just for example, it's not a project, not a real one, maybe in the future, but yes. So in this area, we have the idea of job swap. When you have a job, still have it, for sure. And you want to swap with somebody. And there is another somebody who wants to do the same. So let's analyze. For sure, we will have some registered user and unregistered user. Now we define user types. We have two of them. Let's define what this unregistered user is going to do at the website. For example, we have a website for job swaps, like, I don't know, swap your home, but for jobs. Unregistered user is coming to a website and he understands everything. How is it working? How is it looking like? So it's like a protest, which I'm showing right now. It's how to develop your idea. You had the idea of a job swap website. And then you are starting with development, with the defining of user types. Then the next step, you are defining how are they behaving. This is a behavior of unregistered user and this is a behavior of registered users. Now you defined how are they aware of the website? How is it going to look like? We'll define later your UI and your design. How do we decide how to show the website and how to create it? We can do our conclusions based on mood and on target audience. Mood, for example, you can describe your project with some keywords, some associations with the job swap idea. Any ideas of job swap moods? For example? OK. Yes? Yes, that's true. Then we will define in target audience. Who is our target audience? For sure, it's somebody who is willing to swap something, who is going to try something new, and somebody who is as encouraged as jumping on something new and doing some crazy stuff. But for sure, the user should have a job, to have a possibility of swap. I defined here some mood types and some target audience types. The mood could be like business experience, fine life change. The mood will define how the main page will look like. For example, if it's more like a business style, then you probably have to look for some similar pages about business style. If it's just for fun and you are a targeting audience just to have fun there, then probably it's another coloring and style and everything. So let's dive a bit more about individual design. Visualization of the idea will consist of defining basic elements, then creating the wireframes. So website wireframes is the skeletal mock-up of the website. It's how will the user experience look like. For that, we can use something like that. We can just define that here we will have a catchy picture. There we will have a button or something. And while doing that, we will develop more our idea and we will define what do we really need in our idea. Actually, this is a special case because you are presenting your own idea. You are not taking requirements from somebody. You are not taking requirements from your customer or somebody. If you will have a customer, then probably everything you need to ask from them. And those steps are also possible, but they should be a bit changed because then you will probably have some requirements and then you can jump to other part or you will not have some requirements and then you can ask more questions. So I will show you the example of wireframes for unregistered user. It's like a great headline with this description of the main idea and also some hints where to go and what to do. Then it will explain how the job swap idea is working and then it will show some hot jobs. For unregistered user, everything will be a bit different because he knows everything, how is it working and what to do on the web page and how to proceed with that. So then it will have just applications and just a simple search. For creation of that mock-ups, we used Figma. I can show you, maybe. It's taking some time to render. So Figma is for free. You can just register then. It's really easy to create a mock-up, just to create a page to put some sort of boxers, black or red or something. And then just to render it and show it how is it going to look like. Let's wait a little bit more. So here we have registered user on the side and then unregistered user. Maybe internet is too fast today. Yes. Finally, it's done. So this is for unregistered user. We have a headline and then we have all the description. It's a one-single-page application. For sure, we want our user to stay on the page. That's why it's built like that. And then we have all the other stuff to get the attention of the user. Let's develop further. So about visualization of the idea, we already used target audience and then mood and spirit of the website. And there is another thing which we need to think about. It's the color, color, typography, images, and icons. So visual style examples. For sure, if you are developing something, then you need to search on the internet if there is something which is pretty similar. For swap, you can think maybe Airbnb might be a great idea or maybe it's more like business. It's a news website. And this is couch surfing. It's also about kind of swapping homes. Not really, but a little bit. And then the Meetup. It's like hosting a Meetup and then organizing something. It's more about adventurous people. This is about life exploration. So the thing is, when you are thinking about your idea, you need to check some other ideas because you need to use similar colors, which will follow you or the user to use the same kind of experience, spirit, and pattern, which is used by something which is already well known. For example, if you will take a news website for a dating website, then it might not be work because it's too cold and not that great for meeting other people, not that adventurous. So that's why you need to keep updated with all of the news and all of the ideas already online. Psychology behind the colors. Also, you need to check which color you want to use. If it's appropriate or not, you can check that a bit later. Typography, there are different types of fonts. It's better to use not that hard to read and understand. So the last one is totally unreadable. And if you want to make a headline with that, then it's probably not the best idea ever. Usually, the normal one, which is sans serif, is used. It doesn't have this serif thing. And it's more readable. It's more easy to understand and to catch up the idea. So job swap website design. We have already created it. Let's take a look how is it looking like if you would like to apply for something like that. It's a main page for unregistered user. It's looking like that. And then it's explaining all of the steps, three steps, and the hot jobs, of course, and some successful stories. As usual, some reviews, some partners, social links. And for registered user, it's just applications, recommended jobs, and all the same social links and partners. We have some links with some free graphic resources. We can use unsplash.com to get some photos and everything, which is for free. And you can just use it. Also icons and prototyping a Figma was used. And then now it's object-oriented part. How to design backend part. This is my table. It's looking like that. It's almost the same as designers, but it has some more modeling there. So let's start about basics of object-oriented approach. This approach is about showing everything as an object. You need to define main object and then make objects and then just develop it. Primary tasks of object-oriented design is to define objects, to describe them, and to show how are they related and how are they working with each other. Object analysis tools. How many of you used UML or C4 model or any of them? UML? Yes? That's nice. Actually, UML is most commonly used. It's not that simple as can be, but there are a lot of books and all of the sources, how to work with it. And non-UML, which I really like, is a C4 model. Maybe I will show you the idea. But the idea behind the C4 model, which I really like, is that everything is super simple. It shouldn't be so decorated. You shouldn't show some component structures as they are hard to understand. So this is like a model where you have just boxes with names. And then if you will even decorate, yeah, it will feel better. You will understand more. But even if you will remove all the decorations, then it will be still understandable and clear to update it to share with somebody. So I will share you my example with some different models. As we defined on the previous steps, our use cases for unregistered user and registered user, now we can develop it further for design. Let's keep the diagram up to date. It's a use case which we wanted to develop. So the start is how is the use case is working. The user is coming to the website, then it's entering the city, then checking all the available jobs, and then finding something interesting, then clicking Apply. And then if it's registered, then applying, adding more information. If not registered, then registration form and some other step for unregistered. But what are the main components? For example, we will define a few of them, like a user, a job, an application, and maybe a job swap offer, and maybe some results of application. It was written by hand, by the way. I didn't use any tools. So at the very beginning, when you are not sure about the architecture, you will start with building the components, and then thinking and analyzing how are they going to work together. For example, user will have the application or will create the application, and then user will get a job swap offer. And the job swap offer will probably be connected to a job, for sure it will be. And the application will have some results of the application. So the components diagram will look like that. We will have database of users, database of applications, database of jobs. And then they will be related to a job with a submit a job component. It's not only an object, it's more about component, which is working on some function. It can be like a microservice. Also it can be like a part of the monolith structure. Also depending how much time will we have, how much time and money, then we will define less or more models. It's more simplified. We just need a user, bunch of jobs, application, and maybe results. Or even we can get rid of results. We can put there everything in application. Then we will have a component as a user, which has a job and the application with the job offer. C4 model. C4 model will look like that. It will show the components of our application. For sure we have single page application, which is providing everything and which is based on the idea to keep the user on the page. We will have database in all of the structures there. And then we will have some components. Sign in, register form, submit a job service, for example. Form offer on the swap of users. It will be something based on the preferences of user, for example, and submit an application. Object-oriented design. When you created those models and you defined the base components, then for sure you will go for the object-oriented design. You have an object, and then you need to define how they are related with each other, how they are working with each other. Then you can create a database. You can create the flow, how is it going to work, and use for that different models. So the input for object-oriented design should be provided on the previous step as an object-oriented analysis. When you have all of the forms defined, and then you need just to use that as input. Sometimes if you are not your own designer and developer, then you will have all of those requirements already. And then it will be a part of a design already. So it depends really on your structure and on your system. Then you will have different ways of understanding. But if you have the idea and you need to develop it, then think how is it going to work, how the user will experience there on the website, and how do you want to build it as fast as possible, as good as you can, or just cheap. Do you have any questions? Yes. Questions. If you have any questions, just raise your hand. Hi. Thank you for the talk. So you started off with building a front-page design, basically. How do you validate that this is a good design, actually? It depends how you're going to present. If you are presented to somebody, then you will get the feedback. For sure, you will win or not. OK. Oh, thanks. Any other questions? Oh, half. Sometimes. There is somebody over here. Hello. How do you make the entire process to be incremental from the analysis of the application on the end, on the delivery? You mean to add more features or to? Yes, add more features in a jail way. Do you take feedback from clients or users or? Yeah, thank you for the question. So it depends how is your workflow is. If you need to present to somebody and to get the feedback right away, and you need to just show somebody and to win the tender or to get the feedback or to convince somebody to go for it, then you will probably say, I need a week for that. And then I will show it. And if it's more about building the software architecture at work, and probably you will have a team, and then you will have sprints, epics, and so on. So you will have an epic to create a design of like a visual design, then another epic to create some back end part, some design. And then you will have a feedback. So you will say, I need to finish those epics, and then I will show you. If not, then depends, of course, on your project. If you will show that just a part of it and then get the feedback, then you can change something. But for sure UI will be changed. That's why we are not programming here the UI part. We are just showing how can it look like, and then we are showing also the components. Sometimes you need to change everything in two years. What we did. Yes. Yes, this is what I'm wondering for a startup. It's better to start with the concept and add more features after that based on users' feedback. So the question was more for a product manager or product owner, not for the development part. Because, yeah, the developer development will follow the business after all. I would say it's better to start with a small feature, just to run it live, or to show to somebody and get the feedback, then to go so huge, then you need to develop like one year or two years. It's better to show something small and then get the feedback right away, or just to be fast on the market, because sometimes somebody will take your idea. Yes. Thank you. Thank you. Any other questions? Do you have a question? No. All right. I do think I have the power to dismiss you, but before we do that, let's thank the speaker. Thank you.