How to develop your project from an idea to architecture design in 50 minutes
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Tymoshchuk, Anastasiia
Volovicheva, Elena
Have you ever asked yourself: - how and where to start developing a new project from the scratch, - how to choose main components of a new software or how to develop a new feature, - how to decide whether your project needs refactoring, - how to avoid repeating the same issues? This talk will answer all these questions. You will learn: - how to develop the idea from scratch, - how to use principles of Object Oriented Analysis and Design, - how to show amazing architecture design. You will get better understanding where and how to start, analyze and decouple the system, create a clean, clear and extendable architecture. My slides are here:
 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 functionally the second, the first 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, all 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 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, you're 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 ten 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 system as a service, standalone solution for business companies. We are on the cloud, we are parsing all the emails from our partners and then saying if it's palm 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, 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, 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, no, 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? It's 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 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 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 like 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 is, 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 on 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? Okay. 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 gorillas or maybe some other activities. Maybe you wanted to make tea in your life. But actually, you are 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 the website and he understands everything. How is it working? How is it looking like? So it's like a process 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 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? Okay. Yes? Outside, into the nature or something? 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, define 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 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 like 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 like a button or something. And that we will, 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 hand line with this description of the main idea and also some like 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 a distro 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 it. Then it's really easy to create a mock-up just to create a page to put some sort of boxes, black or red or something and then just to render it and show it how it's 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 have to get the attention of the user. Let's develop further. So about visualization of the idea, we also, 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 like 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, follow 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 news website for news idea for a dating website, then it might not be work because it's like 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 kind of 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 well. 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 C4 model. Maybe I will show you. 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 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 the 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 got 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 like database of users, database of applications, database of jobs and then they will be related to 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 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 and 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? Do you have any questions? Just raise your hand. Hi. Thank you for the talk. So we started off with, well, 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. Okay. Oh, thanks. Any other questions? We'll have some time. 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...? 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. 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. 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. Any other questions? Do you have a question? No. Oh, right. I do think I have the power to dismiss you but before we do that, let's thank the speaker.
 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 functionally the second, the first 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, all 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 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,  you're 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 ten 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 system as a service,  standalone solution for business companies. We are on the cloud, we are parsing all the  emails from our partners and then saying if it's palm 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, 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,  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,  no, 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? It's 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 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 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  like 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 is, 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 on 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? Okay. 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 gorillas or maybe some other activities.  Maybe you wanted to make tea in your life. But actually, you are 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 the website and he understands everything.  How is it working? How is it looking like? So it's like a process 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  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? Okay.  Yes?  Outside, into the nature or something?  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,  define 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 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 like 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 like a button or something. And that we will, 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 hand line with this description  of the main idea and also some like 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 a distro 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  it. Then it's really easy to create a mock-up just to create a page to put some sort of  boxes, black or red or something and then just to render it and show it how it's 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 have to get the attention  of the user. Let's develop further. So about visualization of the idea, we also, 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 like 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, follow 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 news website for news idea for a dating website,  then it might not be work because it's like 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 kind of 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  well. 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 C4 model. Maybe  I will show you. 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 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 the 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 got 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 like database of users, database  of applications, database of jobs and then they will be related to 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 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  and 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? Do you have any questions? Just raise your hand.  Hi. Thank you for the talk. So we started off with, well, 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. Okay. Oh, thanks.  Any other questions? We'll have some time. 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...?  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. 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.  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.  Any other questions? Do you have a question? No. Oh, right. I do think I have the power  to dismiss you but before we do that, let's thank the speaker.
Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_0_5723.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_5724_6239.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_6240_6467.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_6468_6791.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_6792_7175.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_7176_7247.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_7248_7415.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_7416_7811.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_7812_7871.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_7872_7979.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_7980_9299.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_9300_11651.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_11652_25343.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_25344_25547.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_25548_25811.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_25812_25895.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_25896_26003.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_26004_27239.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_27240_27419.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_27420_27503.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_27504_29111.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_29112_30083.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_30084_30431.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_30432_31175.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_31176_31331.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_31332_31403.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_31404_31487.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_31488_31547.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_31548_33299.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_33300_34535.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_34536_34727.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_34728_35147.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_35148_40931.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_40932_41687.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_41688_49715.png Anastasiia_Tymoshchuk_-_How_to_develop_your_project_from_an_idea_to_architecture_d_49716_50116.png