UX-Design Principles – Part 1: How to communicate effectively | Robin Poppenberg | Skillshare

UX-Design Principles – Part 1: How to communicate effectively

Robin Poppenberg, Web-Design, Presentations, Animations & OpenSource

UX-Design Principles – Part 1: How to communicate effectively

Robin Poppenberg, Web-Design, Presentations, Animations & OpenSource

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
41 Lessons (6h 19m)
    • 1. Teaser

    • 2. 00 Hello and Setup

    • 3. !!!=> 00 Introduction

    • 4. !!!=> 00 EXAMPLE Reciproka.cc

    • 5. !!!=> 00 EXAMPLE Onepager.de

    • 6. 00 Ahead of myself

    • 7. !!!=> 00 Overview Main Topics

    • 8. 01 Definition Overview and 1 Benefits of good UX Design

    • 9. 01 Definition 2 What is UX Design

    • 10. !!!=> 01 Definition 3 User Experience Design

    • 11. !!!=> 01 Definition 4 Usability

    • 12. !!!=> 01 Definition EXAMPLE heyDesigner.com

    • 13. 02 Groundwork Overview and Topics

    • 14. !!!=> 02 Groundwork EXAMPLE simplygoodwork.com

    • 15. 03 Research and Strategy Overview and Topics

    • 16. 03 Research and Strategy EXAMPLE gettoby.com

    • 17. !!!=> 04 UX Design Principles Overview and 1 Key Elements

    • 18. 04 UX Design Principles 2 AIDA and the Hooked Pirate

    • 19. 04 UX Design Principles 3 Attention Span

    • 20. !!!=> 04 UX Design Principles EXAMPLE 24ways.org

    • 21. 04 UX Design Principles 4 Keep it Short and Simple

    • 22. !!!=> 04 UX Design Principles 5 Create intuitive Interfaces

    • 23. 04 UX Design Principles Off Topic Freedom of the Designer

    • 24. 04 UX Design Principles 6 Structure and Social Proof

    • 25. !!!=> 04 UX Design Principles 7 Call To Action Buttons

    • 26. 04 UX Design Principles 8 Project Tasks

    • 27. !!!=> 04 UX Design Principles EXAMPLE Wearec2.com

    • 28. 05 Testing Overview and 1 Start with a clear Strategy

    • 29. 05 Testing 2 Test your ideas

    • 30. 05 Testing 3 Listen to feedback

    • 31. 05 Testing 4 Collect Statistics

    • 32. 05 Testing 5 Project Tasks

    • 33. !!!=> 05 Testing EXAMPLE Wehmuth.de/en/

    • 34. 06 Thank you for watching

    • 35. Credits

    • 36. 00 UX Design Basics 1 Unsplash Why and Buying Process

    • 37. 00 UX Design Basics 2 Product Quality

    • 38. 00 UI vs UX Design Example

    • 39. 00 Background Story 1 About Me Skillshare and Open Source

    • 40. 00 Background Story 2 Reciproka

    • 41. 00 Background Story 3 Platform Impress

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

Community Generated

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





About This Class

In a "Prezi-like" Presentation, you will learn for eg. how to:

  • simplify and structure your content,
  • highlight elements effectively,
  • focus on your visitors needs,
  • get to know your customers better!

Main Topics:

  • 01 Definition
  • 02 Groundwork (Who? / What?)
  • 03 Research / Strategy (Why?)
  • 04 UX-Design-Principles (How?)
  • 05 Testing (When? / Where?)

Example - Screenshots:




More Details:
We will look into some UX-Design Principles for great Customer relations. You will get tons of little tips of how to focus on your visitors / customers / users in an effective way.

The most important principle is probably to understand and to use the concept of solving specific problems of specific user-types.

You “get” visitors because they want something, themselves being fully aware of it or not. You are suppose to give them an instant release of their “pain” because of a specific need. It’s all about emotions! May it be an article to read about "Product-XY", the ability to order it easily, just to see some videos about it, or to look at some pictures about the new “toy” you want to have so badly...

There are a lot of use-cases for these strategies, I am aiming mostly for Online Marketing as it is a powerful way to connect with an audience. This Class might be a little theoretical for now, but in the following Parts I will go into more detail of how to use these principles on your products or in your work. I am aiming to give you a good overview of what to focus on and why while believing that you need that for your job that you want to improve your skills, your product or your website.

In this Class for example I’ll try to give you answers to your questions of how to present yourself, your company and most importantly your products. I will argue a lot that less is more, while giving you a lot (I admit maybe too many) of ideas, of how to make your products more effectively using UX-Design-Principles. I hope you will get a much better understanding of how effective, efficient and satisfying customer-interaction could look like.

Meet Your Teacher

Teacher Profile Image

Robin Poppenberg

Web-Design, Presentations, Animations & OpenSource


Hey there :-)

I am Robin, a Full Stack Web Developer, living in the beautiful City Hamburg, Germany. I am an Explorer, Dreamer, Inventor, Nerd, aware of my strength and weaknesses. I always come up with new ideas and I am always looking for new ways to solve problems more easily and effectively.

I am a free spirit who believes in people and projects where development, education and community are the driving forces.

I love to learn and teach. Please don't hesitate to contact me if you want to learn or connect about Web Design, Web Development, Linux or Open Source.

Do you want to improve it's Online-Strategy? Do you need a plan for high-quality Content? Have you got specific ideas or needs for your Website, like individual Content-Elements constantly and ... See full profile

Class Ratings

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

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

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. Teaser: So this the actual overview now, me being talking, probably for 30 minutes to an hour. By now, this is gonna be, like, more like a three or four hour course. Probably a. But as I said earlier, I hope you enjoyed um, it's just little I mean, I've been working on this quite a lot, too. And I hope you realize that you hope you could see that it just was fun. And I wanted to have it make it really nice and like, for example, like one off the last things I actually did was that adding those examples to it. But I think it's really important because it's a lot off Syria. I'm going through here, and it's nice to have some example to and yeah, I hope you appreciate all the work that could. So let's look at the overview off the whole presentation. 2. 00 Hello and Setup: I don't Welcome to my skill share class the bones. Greeks design principles to stop it here. I'm Robin back Developer. For at least the last six years, I've been working in agency for, like, 2.5 years, and right now I'm starting my own business as a freelance. I basically am so my own business working as a freelancer, too, to get some money in. But I'm more like a me too, to realize some of my own projects and doing things like this. Teaching on platforms like skills share, basically focusing on squish school sculpture, YouTube. Um, I haven't done much two targets so far. This is my first Scotia tutorial here. I've been, like doing this kind of videos for my customers already, but, um, yeah, stars like this is the field which I wanted to for many years. I want to teach the stuff I've learned over the last six years on. Yeah, this is finally me starting to actually do this have planned a lot of like, we've got a lot of slides to go through. Um, but I still just start with showing me. Sure. You guys, my set up here that is me. No, I'm going to switch to I'm going to keep the that. Come on. I'm going to switch to, like, zoom remote. And is this lean oaks here? Um, I'm not really happy with the web cam set up right now. I wouldn't mind to, like, even have, like, a green screen. So because I'm going to switch to, like, a presentation, this is maybe it was not the right slight. Um, so now in my head has gone again. This happened before. It should be. And sticky moat always on top of everything. So I'm thinking I'm doing a little trick here. This is not really full screen mode in my browser to keep the window here on top of everything else. So basically, like, moved the window a little weird wait place. You just go with that. But I couldn't really find it Solution for it. Um, okay. Like I said, I've planned a lot. There's a lot of slights in this presentation here. I'm going to split this in a couple of videos. Um, I'm going to try to speak freely. Mostly I want to do that, and I'm gonna try to be slow and let you read the text in between as well on. Um, sometimes I'm going to read what I've written down. Sometimes I won't. Yeah, this is my actual starts mean, But this is like what you see here. It's like an overview off many, many slight. We're gonna go through, um, and you can see I've put a lot of work in it, so you can actually follow me nicely like this. I've done, like yesterday, um, to like, you see my mouse were moving my mouse around. I've got a couple off screens ready here. This is my consul here. Um, this is chromium. Where run the presentation in. This is Genia. Texted it to where? Actually, you can see the whole presentation. It's done. Was impressed, but I will talk about that later. Impress Jess. It's an open source tool to do so. That that kind of presentations was nice effects. I've got a great start. The whole thing. Yeah. Um, this this two years, I think Pike lot court. It's another open source to fully knocks. I could actually even, like, take a screen shot off the background. True to you. So now we've got the background here. Or it could be like the brother Tapas. Well, and now, I could look draw here. Um, so we got this tool to maybe show you something. If I feel like we should draw something, I just use the blast mean so that my face is going again. So with this face, I'm not sure. I think it's kind of nice to to show myself and make you get in, get an idea. Let see me talking and like, yeah, to connect with me in another way. Just give me feet big. If that helps it all, if you want it. We see that in some ways, it's, um it might not be that helpful to use his small screen like I've got here. Um, and in some ways, like I said, look, I've put a lot of work in this presentation, so I'm not really sure that is gonna help that much to have, like, this little image down here. Just give me feedback how you prefer it and what you think about actually like what I'm gonna do. You know, what I'm gonna show, you know, is I'm going to zoom in. The problem is that the Beckham is actually being able to. It's not the best. Where Kim. I think it's a lot to take. I see 6 50 Oh, by the way, I'm like I'm German living living in Hamburg, a beautiful city in Germany. Um so I'm many mother, Chinese, German, not English. So I hope you happy was English. But I actually live in on the U S for for 10 months many years ago, So I think we should be too bad. Yes. So what this Webcams is supposed to have, like, different do, Moz? But the first Zuma's you can just see it's not quite extreme already. And there's nothing in between at least Mr Tool I'm using here. So But this is what I'm gonna do. You get bit can basically see my face, my face saying on, um, see me talking. Yeah. So I guess this is my introduction, Um, for now, So see you in an expedient. Okay, I'm kind of still here because I just realized when I paused a vocal street screen is what I'm using you to record the stuff. I think it's quite good. It's not that it's not using that much resource is on, and my computer I'm using here is quite old already. So I'm quite happy was that tool. But that's like I'm gonna you talk with you guys about the tools I'm using some other time . But you can see I put a lot of working, like using chunky here, for example, to show you some data about what I'm gonna do. Um, using, especially cars, are so you can actually follow my mouth's a little better using Barca, Spain, for example here to show you the colleagues when I'm going to type something, which is gonna be more interesting when I'm programming. Um, you're going to see you don't hear on the bottom off the screen. So when I type something, you can see what I'm doing. That's what you could already see when I switch between the tops here. I'm gonna talk in some other course. I'm going to do some classes. Um, about Lee Knox as well. Yeah, So what? I just figured out what it was. A little weird is I can pause about a key combination, which is nice, but I can't once it's paused. I can't stop it. I have to start it again. and then I can stop it, which is a little weird. And I'm going to try to do. It's a little video editing as possible. Um, yeah. So see you in the next video. 3. !!!=> 00 Introduction: Hey, guys. Um so let's talk a little about the starting screen here. Why? I'm even, like, talking about your ex design principles. What I mean was how to communicate effectively talk a little bit about the Why why am I doing this? Um, so I'm going to give you a little bit of back back one story as well about how I got to this topic. For now, I would just say I think like UX design is really important. It's It changes a lot off to say that it changes the process of building a website or like dealing was products and thinking off how to present the products to your customers. And how do you design the price in the first place? UX design changes a lot of ways in there on, like, there's a lot of fields involved. And, um, I think it helps a lot focusing on the important part. And that's basically like, for example, the user experience on the usability of a product. So why how to communicate effectively? That's basically one off those main focus point points, I think comes out of that work if you want. Once you start not just like producing a nice product, which is awesome. But you don't really check or see if you actually reach someone with it. Like, um, I just I could I could give you an example. I'm gonna show you some websites in those slights just for now, Like I would like to buy, like, an electric long. But at some point, I love writing long boards. Andi, I don't even like mine to actually doing the push pushing myself. But electric longer are getting really, really good. And there's like, um, one board, which I fancy quite a lot, but you always can find much you can't find much information about. And like, the whole presentation off this board is a little weird. The only thing you could find. Maybe it's like the weird two minute video on YouTube about it, and that takes you some time to even, like, find that because you don't even know how it's called. And, um, for me, your ex designed, like, takes the approach off looking more into that question off. How to present you, your products, how to I think off the users in the first case and think, What do they want What do they need? Why? Why should I maybe come up with a couple of YouTube views on Do Channel about my products? And how how do I present my products? Nice. He so I can communicate effectively. Um, yeah. So that's why I came up with this subtitle. In the end, you could You did see, Probably if I'm going to show you the video I did before this one. Um, my subtitle here is called Understanding and Solving the needs of your customers. Yeah, I think that's an important part of UX design. Like, um, looking at the needs of your customers and solving solving those needs with with your products, we're going to talk more and more about this topic. Um, so this is a serious This is part one. You can see the next videos are gonna be about there. Not that hopefully they're gonna be going produce them faster, and they're gonna be a little short as well. Like, I'm not even sure how long this video is gonna take because I'm going to try to take my time. And I've got, like, a lot of slides like that many slides, that it's even difficult for me right now to remember what I wanted to talk about. Like just to show you something. You're going to see that presentation I've got, like, this main slides here. Doesn't really help. Doesn't. Uh, this is the definition, for example, here. And this is next one. Andi, um, was going to go on for, like, five main topics and all those main topics would you would you just saw I've got this overview slides. Andi, um, we know those topics are a lot off sup slides on. Ah, yeah. I'm hoping that the leg next Siri's gonna be a little shorter. The next one is probably gonna be about user profiles. This came us. It's like I said, it's a little much with this doom. Um, what, my, um, user profiles. It's gonna be the next part of the series. Then we're gonna probably do product cheats go over to, um I might actually even, like, put a brand personal branding one in this. Well, that's not like, really my special people like the more and more especially auto, was just doing this course here. This class I'm realizing how much how interesting the personal branding is and how they how the whole like the whole It's kind of a triangle off combining the business, um, the customer and the product through this this triangle here, um, that's kind of an important part off your ex design as well. So I think like folks, point lies between the connection between products and customers. But the more I read and study, like the whole idea off branding and personal branding, for example, the business part is interesting part as well off not just giving your customers its product, but also telling them why you like your products that you stand behind them. That you actually you using your products yourself, Andi. So I might also do a video branding, but there's a lot of nice videos on skill share. Just found a new one, which is part of this challenge right now, which is pretty cool. Should we check it out for a second? Uh, should have put in that town. Okay, let's let me see. Yeah, I'm gonna find second those two here. Um, Mick, Mick, What boost he's pronounced. And his wife, they've got a nice, really cool brand personality video on skill show. Um, I really enjoy it. They do a great job, but there's a lot of information in it. That's, for example, a good starting point. Um, yeah. So, um, that might be videos three. And then part four is gonna be wire framing on Ben. I'm not sure yet. What what's gonna happen next? The the basic idea of God was doing the whole music UX design principles is to get to a point to be able to structure a nice to be able to get a well structured website. Um, taking UX design into consideration a lot, having having the ability to create two to base that website on a well planned wire frame. Um, yeah. Uh, it almost feels like I should stop here and say to see you in the next video to actually start with the presentation itself. So see you in the next video. 4. !!!=> 00 EXAMPLE Reciproka.cc: So let's continue permit myself a TV and eights of blueberries. So that start was just showing you for a second. You're gonna know you're not going to see much bird. It's basically for me. But that's like goal. We're gonna have to in a couple off classes. This is my wire frames. These are my wear friends, just like scribbles. Um, just for myself. I'm showing them to you because those wire frames, they've got a lot of ideas in them already. Like they've got structure they've got, like, certain flow through the side. That's like for one picture here, and we're gonna look in any one patron second as well on. That's why I'm showing you this insect just for a second because these wife rooms have just shown you that's like, kind of the goal. We're heading to the whole UX design. For me, it's a lot about creating good wire frames, the website, the website based on those wire frames and then testing what you have done and seeing the results and those wire from CIA like they've got pictures in it and they've got a like a certain well sorts through structure was CD A's and stuff and the website. We even look all in a second. And mrs a lot off look kind of necessary things. And, um so let's look at what I've written down here about this website. We see Progress CC. Um, okay, the type is the website. Our call that he had a project, maybe project, because it's like it's not finished yet. As I said, we've done that in, like, a couple of hours, like, two days. And, um um yeah, Nash and by rule came up with the initial room, came up with their there, the content, and I gave them this basic. Why a frame where we put all the content on DSO What's positive about Okay? It's an awesome project. It's like it's it's an amazing idea and amazing philosophy behind what they're doing there . And, um, we're going to see that hopefully more more in the next years. This idea off co operative ownership where actually, people, humans own businesses and not like just one person, but a huge group like, yeah, so it's in a more awesome idea and awesome project they've got both of them are amazing people and hope to see helped um I hope to see a lot of them over the next years and always hope to help them with their website and showing their stuff online. So what is good is we've got a simple structure, not nothing much to worry about their like no one is going to get lost or Yeah, I feel like they have no idea what to do next, Kind of, but yeah, and it's responsive already. So waken like see it on on mobility wise as well or as well. And we can we can look at that to the second. I hope I don't forget it. Um, yeah. So negative is there's a weird redirect. So we're gonna access like we're gonna go on. We'll see progress easy. But that's not actually the UL we're gonna end up with. They wouldn't take much time to actually fix that. Just needs to be done. Hasn't been so far. So what happens now is we're gonna access that we can it and this u l and we're gonna end up on and get home page, which is a pretty cool thing because you can host your websites on Get up on for free. It means that the whole sauce coat for for the website needs to be, at least for free. Needs to be accessible. So you could look, you can actually access the whole structure of this website online. Um, yeah, so but it's still pretty cool, but it has since we don't in it, which is, um, which might be confusing for some people. And you actually want if you're your eldest wish program Sweets. Breezy Broca CC. It should always be reciprocal sec. I shouldn't have clicked. Agus fix that. Um, all the pictures I'm using, by the way, all from the website at Splash. So this this one, um, above the fold, we're gonna look at this in a second to you might like. I've asked some people look to look at the website and a good friend of mine. And my mom, for example, boasts both gave the same feat pig, which was like, almost like what? Really? But it happened, like books of them didn't realize at first that they had to scroll down, and they're especially if they knew a little bit about the project, so they kind of knew that. Okay, we get just gonna put up a small little website, and I guess I don't know, they kind of saw it in the 1st 2nd thing. We just put up their name there. Yeah, but it makes sense in some ways that they didn't know that to Scott because there was no no one telling them to scroll. No. Like the problem was, for example, on Mom's computer. She's got, like, a white screen, like her resolution is different to mine. And on my screen, I could see, uh, like, for example, in this screenshot here you can see there's a little Okay, my screen you could always see there. It's like a different area on the bottom, like there was like it starts was a blue blue background on the bottom that was like a white area where I may be a Web developer. What used to be serving a lot of websites, I would off kind of immediately assume. Okay, this is not just a footer, because there's not even anything written in it. This is probably like the next area, and I would see this girl, but but other users they you know, they look at it differently, and they just not notice. So that's something you we I would have to take care of differently. I've got organized solution for that for another website, which I need to put on this one as well. We can look at this second of them. We're gonna talk more about the whole scrolling and feature. So I would say this is already too much Texas. Well, it's like it's not that much take, but it's I think it's not that easy to read. Um, and only text. That's basically why it's too much Texas. Well, if this if this was a combination of text and images and graphics, it would be different already, because then you can, like, relax your eyes on images. Right now, it's only text, and quite a lot of it, but not that much. But yeah, and use us 1/2 like an easy experience. And we're going to talk about like how to highlight certain things like this is not too bad already. Like we've got lucky headlines, sub headlines like highlights in the text. You can see them. Here you go. Yeah, so you know too much tax, no images, graphics, notes, et ace and no contact form Yeah, Instead of a comic form, you just get their email addresses, which it's fine. And when you click on them, you get your email program should open and already have some content, like sub subject in it and stuff. But a contact form one might be good ideas and no city ace. So no call to actions were gonna hear that term quite a lot. Call to actions is basically a prominent button, a huge part of the button which would be maybe below here and say Call us now, like I don't know, like, interact with you in some ways and and make sure that you just you take the next step you want. You want your visitors somehow to interact with you. You don't want them to just read it And just like Okay, this sounds interesting. And then they do something else. Yeah, what do you want to do is like, you have some interaction going into best case scenario of some, um, call to action in the way off, like contact us, fill out the form, join on a newsletter, right as an email and yeah, that's missing here. So let's look so that's it um, let me show you for sick. This is the U L I was talking about. So we had this year. Now, while we were actually going to basic broke Assisi. Sure. Moment. Just a minute. Um, So, um, yeah, in my case, as I said, I see, at least like some white area here, which my mom flexible, didn't see because her resolution was different. So she she just saw this blue area up here and, um, baseball, like you just can't see it right now. So there would be you would see at least a scroll bar, but yeah, my nose of this and you might not notice it, or you might not pay attention to it, so yeah, it would be better you can easily do. That. Was like, See, it s a little javascript. Maybe even it would be better to show a little arrow here. Like I've got a solution on a website where I've got, like, a little arrow in the bottom right corner here. And once you scroll, you start squalling, it disappears and then disappears more and more. That's Father. You scroll. It's gonna disappear. Top here. And, um, you basically know but no, you have to scroll and then it's just gone And what I haven't done yet on that website, which I will add, though to its to probably do the same on the bottom. So once you reach the Baden or you get closer to the very and it's gonna show up again, and then suddenly it's going to be full. A pass ity down here showing a little arrow up so you could, like, click on it or you just like I could realize. Okay, I gotta go up again. If you would click on it, it would just get you to the top of the page again on our in the other case where when it's like this and they would show you here, squirrel down, you could also click on it, and I would just like school. Your dollar do the next area. Um, so this next area So we were like some color changing going on, we could look the white and blue area. We looked at different colors on this is the ones they decided they would like on. I think they're pretty cool. Always be covered with white on white text. The more text you've got, the less the lesser. It's good a good idea to have white text on Dark Burger, and it's more difficult to read like here. It's not the most enjoyable for the ice. I think so, Yeah, it's not too bad, you know. It's a nice website and being done like in two days on, like not even working that much. It's a nice It's a nice result. I would say We've got, like s earlier We've got, like a headline subhead lines and highlights. This is already like, even import structure. Andi, we're gonna look at this kind of structure over and over again because it's like it's it's good and it's important to do that. It's It's based on the fact that most people won't even read the whole thing. They kind of skim through website and then they just like, look at the term like sustainable, open cripe cooperatives. That sounds interesting. And then they agreed the whole paragraph or something. But give them. Give your users your visitors the chance to access information really, really quick, like skimps route really, really quick, and then if they like it, they could jump in more so more the same. The same basic idea could even be in. That's what I kind of refer to when I say that's too much text. I wouldn't even mind if that would would be just the first paragraph, just the first line here, folks up and then have more, like more details here. And then you would click, and then you would get some more information that might just like school down and open some more information about that area. So you would really like simplify. 1st 10 you get details so and yeah, as I said, like, there's no pictures, no call to actions, no graphics like it's just some nice text on um, that's it, which is nice already is I've fused skeleton is this year's s framework, which is kind of really simplistic TSS framework. But there's a get up, a more advanced version off off skeleton. So I like working with it because, like I'm using others as well, like bootstrap but the nesting about skeleton, especially if you have to. If it's quite an individual design, you get the basic functionality off being responsive like you can see you, you can like do it. The Web at the website on different screen sizes and always looks good. Oh, I'm not paying too much attention. To where? My face in in this area? I don't know. It's like, weird with this doom. Yeah. No, I said give me free Big if you like to see me talking, Um, so this means responsive. We can like in different sizes, and it always looks good. This is the website I actually was planning to do Is my first class on skills share. Then I realized, OK, this is if I did it the way I I've actually done the project. It's kind of it takes it takes too much. Um, it's how do you say I would need you to have certain knowledge already? Oh, I would have to almost, like, do other classes first to talk to you about Swept said like, I've done it here. Um, I will come up with a simpler solution like we're gonna just UCS as not sauce. The nice thing about Saskia, for example, is size allows me to have, like, just defined on top of my CSS file that I'm gonna have, like, a blue blue color and white color and they easily changed. And then suddenly we get a different looking website where we we have one position where I could look change this color, and it it would be instantly updated for all those areas. All those areas, like all the blue areas, would certainly have a different kind of blue. That's nice about size. And that's usually how I build websites nowadays. But we don't really need that feature, so we might just get rid of that for no, just used normal CSS have no skeletal to build the work. So let's go even in a proper mobile. You kind of moat. Where now all those blocks are Baloch. So this is already nice. Um, this looks good. You know, you everything looks proper like here. We're gonna hear you were switching a little. I'm not sure that's that. If that's a great idea. Like sometimes we have got to send a text. We've gotta let left a position. Text. Um, I don't know if I would just switch to one specific style here. Um, yeah. As I said, it basically needs images. Highlights more graphics and court actions. So let's who would some other class work on this. Where Said someone and see how it evolves. Great. So we looked at which broke Assisi, saw some good things, saw some bad things, and you might have gotten, like, the first a d away. What kind of is necessary to proof? Um, website. So let's Oh, yeah. I haven't talked much about the content. Now, Maybe you just, like, have a look at the website yourself and just read it. I can really quick Ament. Um I think going more into details about core corpse, but basic The basic idea, The very basic idea behind it, kind of, I would say is mentioned Facebook worse bone by its you tous minimus. Whatever. Um, like, that's just an example. Just just an idea off How, um hope the whole structure could be different. And the whole idea behind this cooperative ownership would be putting the control the, um, the whole, um, business into it's uses into a group. And not just into, if you people who just do with it whatever they like, like just a few people who make lots of money with it, and which basically basically control hall to deal with the data and like I'm not much of a Facebook user at all, but Facebook is not dealing well with the content like they don't. They don't respect our privacy like the same school on. It would probably be quite different if users themselves would have liked would be able to decide what to do with the data. I mean, then the question would be if the users would do that and they wouldn't share the information, you probably would make less money. Or is it? But in since the U. S. Army making money with Facebook directly anyways on, you know, it would be in our something to just make thing off this. Like he mentioned, a Facebook was owned by its users from Yeah, so that's about which broke up for now. 5. !!!=> 00 EXAMPLE Onepager.de: Well, we got another example because I saw it might be a good idea to just see a good example. A one pager, which is well done already, which has some need features to it, which is has got a nice color. Um, seem to it. And yeah, just like, um, a good example. Um, So it's a German website, but that doesn't really matter. I haven't really read much off the con, the contents or for myself. So I don't really worry too much about not being able to understand it. It's about storytelling. There's an agency behind it. It's like there. I think it's like their command commercial page for the well done one paycheck on the condom off. It is directly related to them offering you creating great one pages on. They've got a pretty good domain as well as you can see one page of the D. That's a good domain. You know, there's not many like it's good to own that domain on, Um, yeah, So let's talk about the positive and negative. Mostly they gambled. I'm going to show you mostly positive, even if I got some. Even if I got some negative parts about them, Um, they mostly positive, like sometimes was even kind of difficult to come up with some negative parts. And I think it would be good to look at other examples as well, which might have, like, negative like, which aren't that great. But, um, I shall we stop more was a positive thing. It's always like you didn't learn much. Much from positive, ofcourse, can blow much from a negative upset as well. But I think it's always good to the have an idea of what a good website is, what it what. It's based on what you know, like get the feeding forward and have an example where to have to. Um, so positive is they have violent squall animations. They they they've got a nice mood and color scheme going where you can see here my screen shots I've taken like they've got the same cost scheme, even to the point where they're graphics in the casket. Yellow, black and white, I would say, is like a like a fish. It's called Mobile Brooke White, um, the same colors in their graphics as well, so that's pretty cool. It's pretty neat. That's a good idea. That's give It gives you one certain moved. Um, they've got the arrow down I was talking about only to show you that you you got a squirrel top menu jump is about this menu up here. It's they've got a menu which we haven't wished program, for example Right now. And this menu allows you to jump to certain areas, that website and even gonna show you. Highlight those area but the area where you are. So I think it's when you squall down the menu even will show you that you which next the next area. If not, they should do that. But I think they do. Usually you do that. There's, like, even plug ins which allow you to do that. Um, section structure that's about like, this second screen to basically here, um, like well structured content like you've got graphics, you've got headlines. Sub headline is short text some bullet points and there is a call to action, some some interaction, some something you should do. No, Andi, that's awesome. That's really good. If you get to that kind of structure for your products for your content, you're on the right track like you do a lot of things right away. Um, it's always about like this Simplification. Be simple. You can You can't always, like, put more content in here, but try to be simple. Um, side navigation is about this little navigation, which pops up later on. And I would say a little weird, maybe is that it suddenly shows up, and then it disappears. Kind of again. And but it's cool. It's nice. It's like a really simple damn. Simply don't we should look at that, too. Mm. So what's negative? Yeah, The ESA said that this agency basically do uses that as a good example. Like, it's an awesome little example. If you if one of your customers I don't know how I found it. And you know, you might even find when you search for one picture, I could imagine that you, for one pages and stuff, they might even like, have some Google AdWords go in. And suddenly you on this page and you really like it. And then if you even like being able to be German, the text sounds pretty sound pretty cool, tool. So you fuck You try to figure out who is doing this, and I want this to. And then I think it's called Halle Hellish, the German company behind it, the agency. And so you go to that website and to the agency and asked them if if they could do upset for you. Um, so why I'm saying all this because, like this, this society is not like, I would say, completely done. I wouldn't think that they would actually do that kind of pop up when you click on a button on. It's just an example that something can happen here, that something should happen. What happens here is like there's gonna be a pop up motile window. Showing up was like just some longer content in it on, and it's got some issues with closing it as well. So I would say, You know, it's like it's just an example, Um, but that's maybe not like, well, like, perfectly done yet. So this is it. Shoes. I should be the school bus. Well, it's me again. Yep, hellish. That's the name Hellish median. They're called classes said, like the content years already like it's not like Laura Ipsum text. It's related to one paycheck to one Patriot texts and story telling its digital storytelling. This okay, TV targets is the gym. So, as I said, like, it's it's really nicely done, like you've got a certain mood you've got like, this. Go down arrow and you can see there's a nice animation to it, too, to give you, like a little bit more of feeling off clipping, clickable. I don't know. I mean, actually, this doesn't even like we feel to clickable. I could even imagined that highlighting the whole area was a different color. Usually gives it more, gives you more feeling off being clickable. But on the other hand, you can see nowadays that even Google doesn't always shows. So some highlighting if you go over some button this cases when Google that it doesn't do anything here, for example, it doesn't nice fate to yellow, which I kind of like better than just having a pointer like that's That's at least you will have to do like that's like it should be a proper link. So as you can see here, my mouth is turning into a little point up, which kind of tells the user you can click it. But as I said, it's nice that there's actually, some change going on in this case, there's a little fate to yellow. Uh, it's not just, like showing up here right away, but it's, like, a little smooth. Smooth. So let's scroll down. Um, yes. You can see this, like some nice scrawling information in it. I was mentioning them that as well. Um, with the next area, some more information. Um, so they're basically naming some features. Why one page websites A good idea. What? What's so special about one page websites. How they how they work well together. How they hold. What's so good about, Um, I guess here they want to show you again that you have to score home. So this is actually a little weird. This huge white yellow area here that seems like a little to pick. Look, um so here, but you could see, like how this graphic faded in effect again. And you've seen that in my screenshot? Let's call it a little more down. You've got interrogation here on the site where you can see when I go over point, it shows you where you could go to and this should be clickable. If it wasn't clickable, would be crazy. So click it. I called, um, he is something just happened, which is not the best idea. That's like, You shouldn't do that once. If it's like a proper product for your customer, that shouldn't have happened just now because this disappeared. Now I'm using the navigation and there's no reason for it to having but having disappeared . So if I click here, it states. Yeah, that should be that that you should know that I still can use that. This thing is here when you click on the 1st 1 I guess it's so so far up their that it disappears that I would say That's not the best idea to do. You should. It should be, is growing maybe, like up to here. So you still know this. You can still use this navigation just didn't really disappear. There would be actually another negative fight. I didn't say, but it's nicely done. No, you know, like the whole effect. Like my my mouth. It is disturbing a little bit, but I thought it be nice if you know where my mouse is, like their whole highlight thing might be enough. Get my face again. So, um, what I'm saying, like why? I'm saying this so nicely done? Because it's like, really, really simple. It's like it's well done and you even like things like this. I can go up and down on the site off those points. I don't have to, like, reach that little, tiny little point to see what where I could go to. But the whole navigation work somewhere in this area. That's good. That's great. Um, it gives you a better use experience. It gives you better control. I'm like, right now, like I'm working on a website. Um, the just basically helping company filling the content on that website, one of my daily jobs to keep my rent coming. Um, they're they've got, like, an image slider, which is just weird because they're the image like it. It's it's supposed to look nice and it kind of dust it's gonna imagine like you, you know, those kind of image lives where you've got, like, a huge image, and then our left and right, which are well and huge clickable areas. But then you also got this kind off pagination, um, where you can see Okay, there's, like, four pictures and those four pictures are shown next to each other. But no, it was like dots like here or something. But it was like lines. And those lines are really, really thin. I wait to then they I would say, Like I guess, like they are to mostly three pixels high. They're quite wide, but they're three pixels high. So if you are user, you can actually use those as well. Like besides those hours which are there which do the job, But And if you want to use those those lines you would have you have to like it actually works, But you have to get your mouth exactly over that line. That's kind of like me having to go to this point right here to be able to get through the next picture. That's not a good like I don't like it. I I can understand from a design point of view. It looks nice, but then they should do something like this where the area is still bigger. It doesn't matter that you know all the way on that button. You know it should. It can still look nice, but give you better user experience. If the area is a little bigger. We will talk about that some more later. I will always, like, kind of mentioned. That, for example, was buttons is what, like the whole button should be clickable. It shouldn't just be the text inside of it. You shouldn't have to go over the text. If that's the case, I would say like the APP developer, Neat needs to understand how to how to make a whole every a clickable. That's not a good idea to just have the text inside capable just because people won't understand. Like I'm on the Barton. Why doesn't it work? You know, I mean, it wouldn't show you the The point is thing you know it would be still mounts like now, But still, it's You wouldn't understand that you might lose some clicks because off not having the whole area click be applicable. Let's go down. This is nice. Like I said, like how the graphics comes in, like how the graphics match the whole quick color scheme. Oh, are you got bullet points? Was look nice. Little, uh, check marks. Chick chick. Do you think he's highlighting? Highlighted? Um, like, bold text here. It's nice to if you if you read it, you would probably like if someone like just want us wants to skim suit. They might just read navigation. Then they said, Maybe they read this up Lightness well, and then they jump straight to the bullet points, which is again, like explaining what's good about one pages. And look, this that scientists have done pretty well. Let me check just for a second. If this works like saying, yep, Do you see it jumped from technique technique to concept just by me scrolling down so you could click it Or you could score down. And it does the same thing it gets you like. The navigation always shows you where you are. It wouldn't be good idea. Oh, it's not necessary to show you where you are like highlighting it. But if you do the highlighting, if you if you If, um, if it's a clickable thing, which shows different states like highlighted or not highlighted, it's a good idea to always keep it up to date, and it's not difficult to do that like a set like this plaque. It's to do that kind of thing. I mean, you can program that yourself as well but there's problem. Pockets would just take, like, five minutes to integrate them. Then you've got this future. Um, let us see. So this is this is basically the same. Like, they just go on and on and give you some more features and well, use Andi. Always stick to the same kind of concert. It's good. It's great. That's all you need, Kind of, um, and then they give you some more examples, Slick. Um, other websites, probably as examples. So pull you in. What? What I find a little strange as another feet big, actually, is that the company itself isn't clickable. Um, okay, that's what you have to do. But, um, it would be a little nicer. You see, Old left me. Get me back. Were you top? I guess I just closed toe. Um, so this is, like, the most important, the really most important call to action. Because this is actually where where the company wants to make money. They basically asked us here you are interested in the one picture, so talk to us. Uh, but I would have to have grown all the way down here. I e I would at least make this clickable as well. At least maybe even like, maybe even, like, put some area between, I would actually say since the let's look at this. Um, I was about to say I would even could even think about off, like all those patents always get you do that. But that might be a little too much again, but this I don't really like that much. I mean, it's a right, But I've got, like, two issues with those pop ups here. They are little, um, you say, like, simple. Before you have this beautiful design, suddenly you've got, like, just think some text we had Squall pops on. I don't like this fact. I'm clicking in the background here. I can't close it. So I have to scroll up. If I score darling and read all of this, I have to grow up and then click on this button to close it again. That's not the greatest experience and on and what else out yet? One more thing. I think this last thing way should talk about it. Get on. Was actually was there user experience definition What? I wanted to get to early already. Um, one more thing is that, um you see me scrolling down? Yep. End up. The thing is, if I score some more like and it's just growing in here, but if I score some more No, which just happens because I'm scrolling and I don't know when this text is gonna end, so I might just draw a little more to get to the end. And what happens? You can see it in the background. Background is growing. Now, that's not good. I wouldn't I would never do that. Kind of you shouldn't, because you are just here for a second, and then you you're gonna close that for sure. And then you want to keep on reading where you've been. So what happens now is I want to read more about navigation. So I click on this and they tell me some more about the navigation. So I'm like, Okay, I didn't so I don't really pay attention. What happens in the background in here? And I might have scored too far. So I'm closing. No, no. What? Responsive design? I haven't been there. Okay, this might be interesting to, but I haven't been that I want to. I was just like reading about navigation wasn't back, so this would not be a good idea. If that's like an official website, you should always have. Um, you shouldn't look. Let the background squawk just like that. Just don't It's going. You're in the moral window. So that's all which is growing. But still, it's an awesome website. It's really nicely done. Um, I think they probably get a lot of customers with this kind of website. It's great. Um, so let's close this up and I see you in the next video. 6. 00 Ahead of myself: Okay, so let's look at the well, Let's look at the definition off UX design. I think we talked a lot about the content already on what, what issue? 60 about. But it's always good to apply to look at the definition again. And especially like UX design, since it's absolutely huge field and everybody got like their own little finishing. What I'm going to show you is like basically the Wikipedia definition, which I kind of like quite a lot. Andi, look a little bit on on Don't moments or I always forget how his partners called. We're going to look a usability definition off Don Norman and his partner, the Nielsen Norman, nears normal group, um, about usability, which I think pretty well, pretty great about defining an important part about GX design. So, um, one more thing. As you could see on this example, I think you exercise a lot about looking at the details, looking at the user experience. Really like what happens to the user, what might happen to the user where they might user get into troubles where mighty user have the feeling off? This is This isn't right. This is not working. How I would expect it to work. And, um, I think the example might have shown you a little bit off this kind of approach to it. And, um okay, again, I got it. Click on here, refresh the whole thing, and then get a little image. Um, So, um, I'm still ahead of my own presentation. Bear with me. We're gonna get to the definition. But, um actually, my presentation is going to tell us at some point, like, Okay, we're going to get to the definition now, so I should maybe wait for that. So let's look at this quote for a second. Tell them what they want. Give them what they need. I'm sorry. I like this. Um, it has some deaths to it. Um, it's not that, like, the important thing I think about this quote is there's a difference. And I used to, like, talk about wants you. They want something or need something, and sometimes even, like, just do. It was a slash kind of once needs. It's good to see the difference between them to, and I think that's what comes out in this quote. Quite well. The user might want something like that's what they think off. That's what they have in mind. That's what they think would make them happy. But they might need something different toe actually solve that problem. So this difference is, I think, should at least taken into some consideration. There is a difference between what we want and what we actually need. And that might be like they. But they might be directly related toe to each other. Um, so what I'm saying is like to actually soft what I want. I might need something different, and it's dangerous. Don't don't go two fouls that don't assume too much. Um, but it's good to have that in mind, um 7. !!!=> 00 Overview Main Topics: So this the actual overview? No. Me being talking. Probably for 30 minutes to an hour. By now, this is gonna be, like, more like a three or four hour course. Probably a foot. As I said earlier, I hope you enjoyed, um it just live. I mean, I've been working on this quite a lot, too. And I hope you realize that you hope you could see that it just was fun. And I wanted to have a making really nice and like, for example, like one off. The last things I actually did was like adding those examples to it. But I think it's really important because it's a lot off Syria. I'm going through here, and it's nice to have some examples to on. Yeah, I hope you appreciate all the work putting. So let's look at the overview off the whole presentation. So we're going to start with the definition, and I've said I think enough about it already. It's gonna happen soon as well. Then we're going to go over to the ground work. I call it ground work. It's like Andi. I relate the ground work with who and what. As I said, it's more. I think it's more important to use those kind of who and what questions, But, um, everybody seems to use them in their own top. So I do that to kind of, I like to say, to use the who and what in the same saint in the way off. Who is the user? Who am I kind off but more like Who's the user and what's my products? So who's who? Who? You? There was a need. What's my product as a solution? That's kind of the ground work. So we're going to go into exactly into this those two fields there, Um, in the next in the next classes, that's more. We're gonna just briefly talk about this here. Um, so this is basically get getting into user profiles and product cheats. Then we're gonna go to the research and strategy part, which I relate to Why, um, which is, as I said earlier, really, really important to to do to deal with the why with the um that's like the business part often off it. How's how is the business related to the product? What does the business actually want to solve for the customer? Mm I think that's a little more things in there and the Utes the most. The biggest part is gonna be the UX design principles. How how are we actually gonna get to that kind of well structured content? And what should we focus on? What shouldn't we do on? Yeah, So this UX design principles is it's got a lot of slats. Um, we're going to go through it. Step a step. Just take what you like. Give me feedback to the stuff you don't, Um, What you can see as well Let me show you the last part. That's the testing, Andi. I relate that basically to the wedding where that you can, you can structure the whole questions differently. I like the way the when and where is more for me is the boat. It's like kind of strategy as well again. But it's basically taking into consideration. And is everything working the way I wanted to is everything giving the results which are possible or a t least close to be two possible or in some ways, also what is even possible to be able to to measure what you're doing and see if the if the results anywhere close to what is possible needs to live. You need to measure that and you have some You need to have some experience to see what goes. Well, not like, for example, me doing this kind of tutorial here. I don't know how you like like me talking about I don't know if I'm like, oh, drifting off too much and just talking about my own experience Or if you just enjoy that, I have to see how this is gonna work. And, um, I need to test it somehow, since I I mean, of course I can. I will be able to look at the their views. And how much minutes, minutes you have, actually. What's so if I if I see that you've watched until I don't know if skill says gonna give him , give me that information. I think I'm not sure it would be nice if Scotia would actually show me how long someone has watched the videos are what part? Even Maybe so. That depends little on how well sculptured or some steps I've seen some scooter back and videos which looked like Scotia dust. Just try to give you some steps. But I don't know how far they go, but it would be nice for me to, like know what is going on and important part for me would be like your feedback. So because your feedback would be like, OK, dude, this is way too long. I want I want a short version. I I think I would still go this way because that's me. And that's, um how a kind of want to to do that was kind of classes here, um, to be myself and to actually enjoy doing them by doing this the way I like it. But it still might mean like, OK, I should always do a short, short summary of this, like do this kind of your ex design summary or, you know, and get this out off the feet. Big eso testing is really important. And I think I said that this earlier. Ready? You didn't, um, test this early and often it's possible. That's basically the strategist there. Um, I've worked on a lot of website was out to any kind of testing in that we have. So we you know, we often had just like Google analytics in there, but that's not enough. And, I mean, it's not even enough to sometimes Look at this Google Analytics stats. You have to get into the details. You have to Really? Um oh, no, you don't have to, but it's it's it's good to do. So it's good to actually look at what? How well your your website does, how well your product sold. What? What goes wrong? Where Where do you not meet your customers? Like they kind of want you to. Not that you always have to, like, fulfill every need off your customers. But this logical steps you can take, which helps, Which do help a lot? Um, yeah, that's a testing pot. Um, I don't know if I mentioned, but the whole presentation here, Like I mean, I've told you, like, I would like to be feedback about it, but the whole presentation also is a little bit my pearly Ghoneim, extending it more and more, creating those kind of slides you can see here. And, um, I'm also like playing around with colors, so I'm trying different color schemes. So once we are in one off those areas, we're going to stick to one color. Yeah. So all the definitions. Lights are gonna be with this color, and there might be some images here and there. But the basic color is the color you can see here. Um, yeah, I'm still not sure. It just kind of happened that my my main topic was lots of slides is gonna be quite on purpose. It's cool, but I don't know if there was, like, the the best idea to do. They're just kind of happened. I kind of still like it. And I had to, like, get this presentation. I had to get to a point where I said, Like, this presentation is good enough. I mean, I will probably tell you this later. Some stuff I would I'm close to really like this presentation. Like really, really like there's one thing I wouldn't mind to put on top like one huge thing, though. So I will probably tell you about the more it let okay, maybe I do know it's like once I go into, like, more longest life where, like long, long texts and not really images or examples between I would I would love to have, like, little call to action kind of buttons where I could like, click on and show you a little example. Like a really minimalistic example to show you what I'm talking about. If I had this, I would be happy. Yeah, besides this all being maybe a little too much. So this is the overview off the whole topics we're gonna go through and maybe one thing. Usually we have this lights, um, example and project. I don't think the definition part has a project, but we've got, like, those parts, like we have got, like, the slides. An example, which gonna be in extra video. And then we're gonna have, like, the project tasks get that's about it. And the there. Those areas always have, like, some subject us as showed you earlier. One off those slides, for example, here for different mission. Where we're going to see in a second has, like, this kind of Maine Maine areas, which always will show you with the number where we are at. And then you will find all those numbers in those lights. Um, that's what I was waiting for. This Ed, this is what I should have waited for earlier. So the next video is going to be about the definition off you design. Let me finish this video, and we're gonna start, um, in your video. Second 8. 01 Definition Overview and 1 Benefits of good UX Design: so here. Yup. Um, it doesn't have an splash. Beautiful, Cool little pictures on it. I kind of like this one to underline my different colors there. So all those pictures are Babel on and Splash. And at the very end, somewhere, I'm gonna tell you which images I've actually used by who? But all those pictures hasn't said awful months blesh dot com. So let's look at the definition we're going to talk about the benefits of good years, does that. We talked a lot about that already here. We're going to talk more about it. Maybe I have to set the group. It's would a little faster. Um, we're gonna look at the question off. What issue? 60 then that's the actual definition by Wikipedia. U x t is that sometimes to show the person I don't know how to call the English? Andi, Then we gonna look at usability definition Good, great definition, off usability. And like, if you take that into consideration, you you're on the right track. So what are the benefits off? Good yuks do that. I think there's a lot of benefits to it. And this is just a long list of a couple of things that's just open them all their young Um , yeah, of course you get more happy and returning customers because their user experience is really nice. They they enjoy your site, They enjoy your product. And they If if you do well, they get what they want, They get the for example, they they want to buy a product from you and they are not they they kind of want to feel it . They kind of want experience that they want to touch it with their own hands kind off, but they can get and they haven't really got the money on their on their bank right now to actually buy it. That's the moment where it's like, Awesome. If you if your website kind of get them into contact, was that painted like that product? When it gives you the feeling off how this product is gonna feel? If even if it's just 11 um, YouTube video where someone gives a review? That's why I kind of like companies nowadays sent out on their own products to goat review us who have like a lot off subscribe us because suddenly there's someone talking about their product like looking at it, showing it to fall off the camera, like turning it around you kind off. That's like your closest You can get to that product right now because you can buy it. Yet you're waiting for your paycheck. I don't know, but you get closer to it already. If you If you do that, of course, you've got, like, happy and returning Customers are visitors and you get it. You get closer to actually sell. Okay, you got. Unless we do like less support costs because there's less troubles with your side, there's less Amoros where you'll run into. We will look at this a little more in the usability point, but just you mentioned if every single smooth there is not much to complain about if there is ours. If you use that doesn't understand something. If you use around into the warrants into something which they don't understand, that might get you what give you work because they contact, they complain about it, the more you take into consideration what might happen to the user and solve that nicely, the less problems you can, um, decreased decreased drop off rates. We're going to talk about attention span and stuff like that more detail later. But the basic thing is part off the user experiences, for example, that the page loads fast. If it doesn't that there might be people disappearing already, they limit could be exactly your audience exactly your customer. But they just don't enjoy this first half minute where they have to wait for something to load. You've got, like, this huge background veal, which is just no working for them, and they they just give up. They just I decided to go somewhere else, and they might never show up again. So a good user experience takes into consideration those kind of things and works on Page Woods, which should work like should somewhere recommend. This neat page needs to be loading faster. We got some user feedback. It's lot's Lot's too slow. Sometimes you can just like you don't need the feedback. You just see that you just realize, OK, this is the page needs to be more put. Be more performance performance. Oh, um, yeah, of course that your page would be shared more. Your products would be talked more about when? When? When? When the use experiences, right? Um depending on the kind of page, you would probably get a higher user involvement to off course. They enjoy what they see. They interact with it. Um, yeah. Oh, Oh, by the way, because to keep, um, to keep on track, I would probably have to write. Good, um, was the upper case here. As I said, I'm not a native English speaker, so it's weird because in German week we spell it out off more words. It was a big letter, and here it's just a mistake that I didn't but bear in mind that there might probably be quite some spending hours. I hope that's all right. Um, yeah, depending on how you deal with use experience on, as I said, like, it depends a little on how much you go into the direction off having a brand as well. On using your company as a good foundation. You might get, of course, good brand recognition as well, but it really depends. I would I would more think about it. The more I think it's it's a good way to go there. Um, if not you probably. I know you probably aren't. I would say you probably aren't the most mole person in some way, so you just don't care? I take this back, but I I would feel like if there is no no company like no, like no company behind, which seems to be really cool. Um, I would get the feeling off there. Something fishy there might. They might just want to tell me this product. They don't really care much about it. They just want to make money. So it's good if your your company, your brand, actually can stand up for that. Will you stand up for the products? Yeah, Yeah, for me. It's like in a lot of cases nowadays, this huge companies who basically are good at selling themselves but aren't really that great of a company. Like, I don't know. It's I don't want to name calling names. No, but this that seems to be too many companies know days who just care about money, and they still give you the image of a good bread. But they don't really care that much about high quality products. 9. 01 Definition 2 What is UX Design: if you take into consideration how the user experience website your product. So what is your, um, my research? I'm not sure if it's not 1995 or 93 but my reset. My reset right now is at the point of like Don Norman as like the the first person who came up with the term letting working at Apple starting at 1993 with the job title user experience architect, architect. Sometimes it's already refer to ask, use experience, design up the term use. Experienced is knowing, but very sickly. That's where it all got a name to. This kind of approach on Don't Normal is a pretty cool guy anyways, and there's like a really short video about him on YouTube. Test long talked about him. Awesome. A swell, but the short one I kind of enjoyed because he was giving this example off getting a product home, you know, like he was starting to work when you when he bought like you would buy a computer, which is like in that big of a packet package that you having. You were having difficulties to put it into your car, and he was saying like he was focusing on this importance off user experiences everywhere. It's like, for example, was this computer. It starts when you buy it in the shop, and its stance was the experience of how you get it home. It better. User experience is probably Amazon, which just sends it to you. That's why Amazon so successful, because you don't have to go into some shop and buy the washing machine anymore. You could. I mean, you can probably buy like I don't know how many washing machines at Amazon That's a different at better user experience that made a few quite successful. So don't Namen basically started all this on see more food? Second, uh, I think I mentioned that before user experience is still like I feel it was many different interpretations on usages and sophistication. Levels, for example, is in the way off like cos agencies or like it's. Still, it might differ quite a lot on how well user experience design is actually part of the process. And you might still face a lot off companies which basically have got like they've got like designers and then develop us like there's the 1st 1 who's just basically talking to the customer always. I don't know that you just dumped. But the the designer is more normal, kind of graphics designer who designs like a nice user interface, kind off and probably hopefully text into consideration some off those areas as well. And, like everything is like matched was the company. It was the customer, But you might face companies where, like the whole user experience, design part isn't really like much powerful process where where you do the testing, where you actually maybe create a prototype. Show that to some customers, some testing some some users to give your feet bag, or even like some some employees in your company to just see how well it works, how, how, where the problems are if everything goes smoothly. So that's what I mean was like different sophistication levels. Um, and there's a lot of areas involved in UX design. That's that's for sure. Like I think it's important to just focus on some of the basic ideas behind it, but you can take it quite fall. I think a lot of those things part being part off you may make a lot of sense. I'm not going to show you much like images off. What do you exit? Design is interpreted like, but just like Google Google, you ux design And look at all those different images. It's crazy. How many different ways off user index you they use a UX design is out there, but I think they mostly go around the same principles. Um, yeah. I'm just going to talk about the ones I find most important to stop with. Maybe not just only to stop was but the important areas. I find two areas I find most of books. Um, so good. You x did I always should be based on detailed research. Um, on here, we get to the strangle again. I was mentioning only developing a deep understanding off the main goals about the by the potential users businesses and its products. Like, what is the main goal off the user? What? What does the business really want to accomplish? And how does the product bring them to together, for example? Yeah, So the better. You know, those three fields and those relations off them to each other, the better you your whole process is gonna be Mm. Yeah, and the more you know those things more should influence your the design off a product already, or at least like the presentation off it on. And, um, yeah, a key. A key factor, I think, always is next to to focus on offering certain solution or like specific solutions to a certain problem. Um, mostly related to some one specific custom type of customer. Um, yeah, and that's being mostly done by focusing on their wants, needs and emotions. That's why I said earlier here, Wants and needs are basically just standing next to each other. But emotions is a huge and important term in your design. On we will talk about that some more. But just bear in mind that bad emotion coming up on your website is not a good idea you might like instantly used to customer. You might instantly have them. You kind of have them on steps re of some kind of buying process that five would actually be like. Okay, now he's just waiting for your product and you're waiting for the money kind off. But you might just lose him on Step three because you've done something, which is that you really didn't, like, really didn't enjoy. And we're just, like, killed the whole process. Um, yeah. So emotions always important and always necessary to look at. 10. !!!=> 01 Definition 3 User Experience Design: So that's here. That actually Vicky Pia user experience design definition. I would think, um, it's eso user experience denying it's the process off enhancing user satisfaction by improving the usability, accessibility and pleasure provided in the interaction between the user and a product. That's how do you say in English, like quite a mouthful already? Um, I think it's a great definition, and there's a lot off, um, things in it already. Um, so it's all about it. Mentions. Quite not here. Yeah, that's like Go through it for a little bit. Maybe so way talked about the process. All right? Yeah, it's it's involved in some kind of process. It's about He was a satisfaction not to make them to make them happy, not to make them somehow unhappy to get them into some trouble. So I don't want to feel have. So that's why usability and accessibility come into a game to play on the pleasure. That's another one, like really important the pleasure up behind the interaction. So keep them entertained. Keep them busy. Came there. I don't know. Like, if this was a website, it would be awesome if they user could kind off maybe it would just be a click on this very pick ups, so they would. Something would happen that so interaction is really important and the pleasure provided to the infection. And then the most important thing I think of all is the relation which you the connection between the users of the product. Yeah, this is probably the most important thing of all. Like and the product again might be the website, a website, as a middleman, all the product behind it. If the website is just a middleman, if it's just like not about like if the website itself isn't the product, so if not something like, um if there's another step, your user needs to take its a different scenario. But just take into consideration that the product could be different things and you need to focus on those different kind of things, like a website where where it's just the middleman, kind of you're trying to buy a product and it's not getting the information. Some information from that website it's still the same criteria which needed to be met, like the website then is kind of a product itself, which needs to be a pleasure and, um says fighting experience. Yeah, 11. !!!=> 01 Definition 4 Usability: So Jack O Neill's. That's the other guy. I think it's Nielsen Norman Group. Um, so Don Norman Jacobean? They they They've been working together for many, many years already, and they are in the business off user user experience designed for for a long, long time. And it's like Jacob Nielson. I haven't seen much of him so far, but he seems to be like genius as well. Just look at the at their website at no news Norman Group, and there's a lot of good information on which I really, really fancied and took in here. Is there this those five points I will show you know about, for example, their definition off three usability slash quality off system. Um, and that's based on those five points. And I think system here again is you should take quite loosely. System could be all kinds off usability and a like usability experienced this. So first and most importantly, how easy it is to learn a product that that's like especially was the new system. You don't know yet if you haven't been on that website. Is it easy to understand that website? Is it is it kind of weird or different. And if it's different, isn't easy to handle. Is it easy to learn? Do you kind of instantly understand how it works? Say, like a huge part two. Click on. So if, like, if it's like that, it can't be different. But it needs to be easy. It needs to be understandable. And, um, like if you're not good at that, you should probably stick to more convention than trying to be too freaky, because you might just not meet the customers need, um, So how efficient it is it is it to use? Um, I think it's pretty clear. Um, I think it's an important point. We haven't talked about that much, but, um, it's it's a little bit more like, um, how well does it perform? Kind of, you know, it's Does it do what I wanted to do? It doesn't need some extras. Do I have to buy, like, package X y to actually make it work? Like I wanted to be, like, kind of, you know, do I have to have, um, another system next to it like not like an upgrade, But it just does. Doesn't really so all my needs, but just one that might be like I said earlier. It might be good idea to just solve one specific problem that, but that really well. But if there's related problems like closely related problems, it might be a good approach to being efficient in a way off, like solving two problems at once because they're so close to each other. So that's like, kind of think off what you want to solve, what problems you want to solve. What, what problems are related to it. And looking at those factors, you get an idea of how efficient product is. Um, so country is how easy it is to remember. Um, okay, we're talking here about the usability of a system. So, um, I'm not really that sure, and I don't really recall what that point basically was about. But I guess it's like if you look at if you want it, if you're not using a product for a while, I kind of let leave it. Besides, for for kind of a week, eso you kind of have a micro wife at home. You haven't touched for a week. You still being able to use it like, Are you suddenly like clueless off how to do this and that you have done it before. You understood it like a week before, but it's not like that intuitive. So you certainly minority who works again. And so I like it frustrates you, you know you want it, you want it the best case, you know, you want to be that easy that you can do the same thing sick, like instantly, actually, or at least close to instantly and then having them being that easy that you just recall them. Easy to, um, 0.4 is I like I put it in some kind of sentence here while making only a few hours put in the fifth as well How pleasant it is to use. So while making me only a few hours is it Won't I like this way off? They them having put this already? Um, just look at a jack up. Nielsen's visibility. A tickle. Yeah, that's basically extract those five points from him while making a few else And what I like about it, it's already taken into consideration that there is going to be a few else. You you probably not gonna make the perfect system or you might even have, like the perfect system. But the perfect system always has, like different users. And some might make errors. Some might not. But there's always like some who do. And the most important part of all this that there's only if you have hours happening, like you probably can't exclude hours, but make them as few as possible and as little as possible. Like focus on if there's an L, for example, to to interact with the user to tell them. Oh, you're not supposed to do this right now. You you need to fill out this form first. Yeah, he is. You forgot to fill out. I don't know your phone number. You want the phone above the person The person is supposed to be called by you. Yeah. So the phone number, the farm field phone number is required. And if if you are there, just make sure that they are nicely being shown that the phone number is missing and for example, I mean, I haven't seen that why, But many years ago you could have had the fact off having to fill out at least huge parts off the form again while you just like you missed on one field. But since there was an arrow that they just, like, kind of refresh the form. So you have got, like, an empty form again. I think of people don't even remember that kind of problems. But it was like that. And, um but, you know, just make sure that it shows you an error message. It's clear what was missing. And it makes it easy for you to to supply the information. And, I mean, like, spontaneously, I could think off, like, even reducing the form to just that field. Kind of like, make everything up. Everything else is disappear. I mean, if you do that something that you should always like, give the opportunity to show the other feels again. But I could easily see, like, a nice solution when you just have this one form field left and the user could fill it out then. So, yeah, keep keep it to a few hours and yeah, the 5th 1 I think I answered that in a couple of ways already. How pleasant. How pleasant it is to you to use, um to abused. Um uh, it's pretty clear it should be enjoyable. You should enjoy it. It's it's not even that difficult. Maybe the most important part again is it's not always. It doesn't always need to be the most prettiest sight, but it just should be, um it's really, really easy to get where you want to get. I think if, um, it always depends on the content, like there might be different scenarios. What is actually pleasure. Um, if you want to read a lot of text, I don't I think it's if you want to read a lot of text, it's it's necessary that the text this in a good and size, for example, if I'm thinking of Reddit. But no, and I can really relate to read it much because for me, it starts already was like seeing those little tiny little texts and then huge, huge long conversations. I mean, of course, I were part of them here and there. But for me, read It is not a pleasant experience for what I want. It reminds me on like, crazy kind of form years back when I tried to like soft some Web development problems, and you always lend some kind of weird form where you have to, like, read through Lord Off, lot off answers and it's It was a pain. And for me, red was this. My small, tiny little text feeds the same way. It's not pleasant for me to use to be used. So the first thing I would probably suggest, like, why? Why can't I, like, set up my phone size? What's up? Something that or maybe even, um, I don't know, get a shortened version off the whole conversation, like some way off, like you can highlight the comment, Anil for me, where it is not pleasant for me, it seems for most people it is. For me, it's somewhere it's not. Yeah, those five points are really, really important or oh, yeah, take care off them. Make sure to keep them in mind, to check over and over again. If that's the case off that where there's problems teak, take feedback and take it into consideration. And, um, at best, don't wait, too. Deal with those five points until the point where kind of far ahead already and maybe even too late. Because of that, you don't want to change your system all the time. I mean, you might be able to do some changes. I don't know. There's this cool talk. I think it's on YouTube. But I got a guy about usability. UX design. I can't remember his name. He gives this nice example off. EBay, eBay A couple of years ago, like when even started, they had like this yellow background, but it wasn't strongly yellow, but there was some yellow two and people who knew that yellow kind of enjoyed it. And you were saying, like because of Google coming up and being this plain white background kind of thing And eBay saw like, Oh, we gotta go into this trend off like having a white background. So they changed the background from one day to the other into black into white background, and they use us, must have gone kind of crazy about it. That was like lots of feedback about it. And like some even like saying, this cycle's broken, the yellow kind of is gone. So there was like a huge like response to suddenly this backward, not being yellow anymore. So that's a good example, I think, for for for small, a seemingly small change which has a lot off consequences to it. And, um, it gets worse if it's about buttons and really deep. You. I factors if you have to. If you have to effect or your whole kind of system. You might use a lot of users already because some already family was it like the same thing about, like the new weird, kind off Microsoft, um, word kind of drop down menu there. It's like it was a huge topic, but let's stick to even and then move on. So what? Even eBay, he said, was doing in there were just crazy. Kind off, and so is a eBay. Still wanted to get to this white background. So what they did, they wrote their own little algorithm to change it over time, like slowly, slowly change it like slowly, like I don't know how it was like if it was every day, like every day. The yellow was getting a little bit lighter a little bit later, until it was finally white in the end. But imagine if your system wasn't good and it was not just about the background, but you had to like huge changes, kind of ahead of you. How would you even start to to change them, which are kind of which are kind of necessary, but would make a lot of people facing troubles and having to complain about that kind of. So thank those five points and use it UX design into consideration as early as possible. So we're going to stop here on Do Look at another website. It's called Hey, designer Call. I got to it a couple of times already, and I really I really enjoy it. It's like it's It's just basically a collection off links about UX design and related topics. Um, but a good, great collection on Yeah, let's have a look at it and look as before the positive and negatives about it on Yeah, so to you in the next video. 12. !!!=> 01 Definition EXAMPLE heyDesigner.com: so cattle off hours later, I thought we gonna should continue with this example and see if they get their power to do some more classes. Net Next would be like the ground work. Um God, this is where I stopped Elia to give you another example. Page. Then it'll come. I like the page. It's basically like a collection of resource is like basically link collection. It was a lot of positive sides to think especially like it's a nice link connection. There's good. Goodling's good. It's a good resource collection for designed US UX designed boards and stuff. We're gonna look at the navigation points in second, so yeah, it's kind of nice. Simple concept, design and structure. There's not much to it, but that's often like a good thing not to overwhelm with teachers and keep it simple. Keep it. Keep it to like, a specific purpose. Um, yeah. So that's a search bar which gives you, like, results pretty quick that nothing special to it. Oh, don't even think of the like that, sweetie, that positive here. But we're just not What is nice is like. You can start scrolling and you still get the navigation on the site. This just this area is being scrolled. Also, there's some browse topics area this one here, which just nice overview. I think that there shows how many links they are, too about that topic on what I kind of like to. And that's kind of part of this simple concept. You click it, you just get to that website like this medium articles in here for a self medium to come. I'm the huge block blogging website eso you just click it and you just get there right away . There's no weird something happening, you know. It's very straightforward, which is good. Um, the newsletter screwed. Subscribe. Let's see if that pops up on. There was kind of nice aborts, just like you see that in a couple of pitches now there was like, I think it was down here. It just showed up at some point when you was when I was growing dollar just really simple, really clean. Suggesting to put in your email address senate and joined the newsletter. It was a close, you two girls, but it was good, you know, like simple good news square parliament. Um, your negative. I think the page. As I said earlier, it's important. I'm basically showing you examples I like. I think they're well done. Um, maybe like it would like. One feature would be to have, like, the possibility to have some favorites off your own on. But that might like require some kind of locking functionality, so that's getting suddenly way bigger than it is right now. But it would be kind of nice, you know, like I might not like all those links here, but I kind of if I would use this pledge a lot, it would be cool to be able to kind of have my own favorites somewhere. And I just use those. Mm. So also, there's no interaction. It's not like something like, I read it where you were. You could like vote, link up or down or, like, talk about something. It's as I said, It's clean and simple. Just collection of links to to a specific area. Um, what else? Yeah, no hardener story. That's a little bit. It's not like that bad. You don't have to do that. But, um, you almost noticed, um, the days Not really anything about the background. You don't really know who's behind this side much on? There's no story telling you how it all happened, how they came up with that side. Why those links are like those. This collection is quite nice and how they find them themselves. I don't know. Whatever you don't give you, give us a story. Tell us a little, but about yourself. Um, yeah, it's from there. So that's it. And stop age. As you can see, you look good. That's nice. Um, you gotta show, but what? You can gallop your view. So that's the scrolling functionality I was talking about him scrawling, and I still can see the whole popular topics navigation here. When you look at what's the links are about, you see the branding style guide designed system, atomic design product Is that wire for prototyping? You know, typography, typography, sketch of you You are UX design, and it's all like pretty much about baptism. And, um, that's another good idea to just, like, be really specific. Give give us specific solution for my you need. In this case, it's not really a problem, but it's a needle out. I want to have like I would have a nice collection of links about why I find me whatever. I don't know. A product design. I want toe prepare myself some more for this tutorial. So I could see. So what's what's up in ux design on? Um, so you see, different collection off different articles here, Um, you can see the it's attacked us well on. And, um, still got more than one take Andi. So if we find something interesting 25 for ways to look like an awesome you to design, it's ever So we get we get a title, we get a short description that that might even be like, pulled straight from the page itself, pulling the description tech. And if we keep on it, we're straight on medium again. Ah, Still loading. So now we are medium can wait. Could week the article. I'm gonna go back, but you get that. You, um I think I'll leave it at this funnel. We just have a look at the cross topics. Okay, there. Um, useless isn't ensuring a visit. It's kind of like this. It was a public around here. So this is the broads. Topics also it again. Quite simple. You see how many post there about a certain topic on lots of post about typography. Storytelling. 88 Post. I'm not going to talk much about storytelling. I've got even, like presentation for that. I'm laying around storytelling. It's actually for my my opinion, quite an important part of you did as well or can be nice and on to. Could you extend? Um, but I'm going to talk about that some other time. Ah, yeah, so and that's a simple thing. We're upside. So this is part of the being a little bit clean and a little bit. I say There's a little bit of heart missing. You just tell you like it's it's running since to tell 12. How many views got Facebook for all of us? A lot of Twitter followers, um, Thomas sorries some behind it, but that's basically if you don't, you don't get much more information. Actually think like he's just collecting really nice articles and resources. That's probably a small team behind, too, but you are. We don't know, and I kind of I would I would like to know more about it, and they've got like that is act like they've got pretty cool things laying around to you, so I would look at it. Ah, so I'm gonna stop to be 13. 02 Groundwork Overview and Topics: this next video right here. Right now, it's about ground work. Second big park. But actually, I think saying since I have been talking quite a lot already, we should probably go through this one a little quicker, especially because this is based on, um, other topics I'm gonna do, like, in own classes. Um, so, yeah, the biggest areas is to know your customers, their wants and needs. We talked about that, Um, the second really important part. Like Okay, this is user profiles. Second part here is defining simple products. With a clear purpose is the product sheets, which I call product. It's basically specific, like you've got a specific need. And you the best case scenario, you develop a product solving that need. Sometimes you even look, come up with new ideas like apple apples. Goal is often to come up with something new on, but they can have still somehow see need somewhere. Maybe you just not aware of it yet. But you kind of want to carry around your music in your pop it in a small little, um, MP three player. I put, um, So that's the next class is gonna be about user profiles and product cheats on. We gonna fill them out on its part of your project to clarify, like, make Make yourself clear. What kind of, um, use up use us. You. You wanna supply mainly on how your products relate to them? Um, yeah. Product project tests. I think I'm suggesting some might Pepsi, but let's see what we get. So now we're gonna jump into the 1st 1 This England one force afterwards. Um, yeah, Well, no. You know, your customers, it's important. And the more you know them, who are them? Who are them? Yeah, well, they well, there, um, what is the story? Well, what are their challenges? What did I want? What do they need? What kind of job do they have? What's the name hold are like, we're gonna look at a user profile and fill out. I think the user profile she is going to help you after those questions here. I actually have a big fed off apple, but still, they do pretty amazing stuff. This quote by Steve Jobs design. It is not just what looks like and feels like designers how it works. Mm. And for me, I see that into UX design, that strong relationship managing to have a strong relation between your customers and your products. So once you know your customers, you can pair them about the benefits and advantages highlight their specific gain. But you're given solution, solve the problems and make them happy. So you've got very emotional kind of answer to their specific need. They want to. I don't They want they and they want to be. They want to feel the product. You sell them. They wanted it. If you better about it. They want to know why it's that great. What, what? What does itself for them? White. Where does it help them in their in their daily lives and or how? How does it make them happy? Um, it's a lot about knowing how you can, um, reach them on an emotional level, depending a little bit on, like the market sophistication we talked about. So part twos define simple products with clear purpose, so it doesn't really matter if it's a website or product. Always tried to make sure you follow is a certain purpose. Know what the purpose is off that area? Know what the purpose is off that image. No way. What you're doing, Why you're doing that? So we talked about that. Too little. If your if your customer wants to buy something or if your visitor user wants to buy something, make it enjoyable and easy process. Don't get too complicated to make it easier. Possible Easiest. That's like the part where it's just about wanting to know something. If if you go to a website because you've got a problem, would you wanna have you got an issue with your product? You don't I don't know. You want to know how to I know fast forward was your MP three player because for some reason you feel like it doesn't work to I want to push the button on. Then someone can goes to this side and wants to know why. How how does it work? How do I do this On a best case scenario? You you give them you give them a fast way to that adds up. Yeah, this just another thing. And there I think it takes a lot off. Try an hour to get to those kind of scenarios here and know your users and you need to know you use as well. But in best came in best case scenario, You solved the problem because they don't be. They even start to wonder about them about it. In best case and know, you're kind of they don't even have to search somewhere to like, such for their in in search field. But you just basically give them what they want right there. Right now, if you have too, if you got complicated concepts. But, I mean, it might always be the case you've got. Like you've got it in advanced product was a lot of features. Like it. It is for very, very certain purpose. Um, split up into easily understandable steps. Step street. Use a problem, Professor Product seeds. Um, yeah, I'm gonna say anything to this one. Yeah, I mentioned that already. So this my 1st 2 suggestions for protect task, you could just do a simple might melt where you're like, right, but, um, one specific customer in the middle of the paper, and then you just do a mind map and just basically right down um, kind of a network which comes into mind when you think about that customer. What? What? What kind of customized that to stand you can do. It was your products. It's always a good good idea to just, like, get the mind going by doing some maps. Um, if you haven't done them, it's basically just right, like, right, your customer in the middle of the paper. And then you draw a line up here, and then you write something down there like the age, for example, like, the name comes over here, and then you've got, like, a job, a family, and then two Children, whatever you know, just, like set up into on network about it. Onda, of course, upload them into the project folder, if you like to and share them with us. So this is already like, um, the groundwork, the end of the ground work. We're gonna look at another example And the next video 14. !!!=> 02 Groundwork EXAMPLE simplygoodwork.com: So next is another agency. I came across the other day, and now they keep following me because of my cookies on all kind of pages. I'm going. So they got a lot off Google AdWords going, Um, but then website is quite nice. It's like, really simply well, well done, I think. Simply good work dot com. Um, so let's look at the positive. They've got it like direct name. They are direct in some ways on their good name. They've got a grouped structure was actually quite little content. Straight to the point, though, um, the reason I have to block over the years. Quite nice to simple, good on negative. Some parts, I mean, always depends on how much they are focusing on the block, but they've got a good block, have kept some interesting articles in there, But you don't really there's not really an easy way to reach it. It's like somewhere on the bottom of the page, small, but I guess they want you to basically click here to contact them. But that's another thing there. Conduct Button isn't That's right. I don't know which there might actually be boots struck for me This is not enough, Like just a little highlight. I, like I like to be more make. Make the user more well, like this is something to click here. Um, So what is nice here is, um, the normal structure. You see quite a lot again. Get this kind of one paycheck again, where you just have to scroll alone on, uh, here. Already they tried to so solve certain problems you might face. So that's locators. Finally, a development shop that speaks human. It's easy to work with and cares about your project a lot as much as you do. So they kind of feel like there's a lot of agencies out there who don't do that, Really. They just kind of want to make money and just kind of get you through the process. But they don't really care much about you here. They kind of I want to make you aware of the fact that if you work with them, they really can They they wanted make you happy. Um, they underlined. It was like a nice little fun picture on which also kind off, like, makes you to squat down right away. You know, Steve, this and you kind of feel like, Oh, what's going on? You there? They're gonna be more. Start scoring. Don't you see this crazy Teoh picture? No, she's standing little dangerously. Um, so then we get some more short paragraphs. Um, headlines, sub headlines or not. What a bullet point. Kind of lists about everything. Like the most basic things. You need to know the project. The after care hosting agencies. They worked with some quotes to, like, social proof, um, other happy customers on, like, basically the tools they used to realize that, um And then there's a call to action where you could, like, schedule call. Who's them in two years to block was talking about earlier. I mean, it's fine, but it's a nice block, so I can mine too, a little bit more like in the present. So this is another negative. What? I'm gonna shoot you right now. I don't really love this too much like this standing here to the point below it, but that's all right. I mean, you should read it down here, but don't. I've got too much, many years kind of modern, too. I like those new modern man years. This like um, the experience, like still shows a little at those kind off burger menus are losing some clicks because you could click one more time like you mentioned if the many was up here showing the same points like we're going to see here like home Arctic it's about contact would be right here you could like with the first click you could straight go to contact. Now I have to go here and then kick on contact. So that's one kick more and yeah, uh um, that's clicks is bad. And then here's a small little contact fall to that, um, simply good work. So up next, here's part three. Research and strategy. Oh, what I would call the wife. 15. 03 Research and Strategy Overview and Topics: So let's look at the overview that identification was the brand with the company is quite important, as I said, like, I'm kind of from you to that whole topic, But it's also really trust building kind of exercise. If you talk about your values and talk about what you really care about and why cam on it and how you what makes you special? How how are you treating customers differently than others, like we just saw it like simply good work where they making sure that you understand that they really care about? Um also, it's, um, building up Trust was social prove like we have seen on the website. To was testimonial missed testimony Neill's and things like that where you basically show that the customers are happy with your work. I need to get better that to like I like the website, some off the websites I've got out right now. I haven't really taken care of that part still so far, but I'm saying this right now, it's just switched to this page for a second. My whole website is basically still I've got hugging Nice plan for website laying around, but I still haven't got the time for doing bed. So I kind of suggest you to ignore this link for another month or two, maybe. Um, follow me into a town. I always Nick use a used twitter right now for the big announcements on. That's basically my go to place to Yeah, share. I thought it thinks about my business. Right again. So next, how is the business goals? And we talked about this triangle already. The connection between business products and customers and part of UX designers always also being aware of the business goals. How to accomplish them on how to Yeah. What? We're work. What was this triangle? Um, make it about the customers. We talked about that too already. Um, I'm not even right right now to show what I'm doing at this party will see in a second, um, force short. Little suggestions about stories, skills and values and part five again, Is the project asked? I suggest you to do about this. Part three. There's research threatened to part. So the identification or the social proof? Um, yeah, it's, um it's It's about building up trust in long term relationships. That's the most important point. Which highlighted here as well. I mentioned already, of course, which I enjoyed this more courses about branding on. It's a huge topic right now on there's a lot off good, good information laying around and maybe even like I'm going to, of course, about that, too, on a chew it the most important thing I find and that's really nice. It's kind of what I'm trying to do here as well. I'm trying to be as much myself as possible. I'm trying to relax and just talk freely and just, um, not to care too much about making mistakes and not to be able to speak perfect English. Just try to to do it, just to be myself, just to talk with you guys on, enjoy talking about things that often. I mean, like, I hope you can see that and you might see that in the future to look, I really, really enjoy Web design. A lot of different in lots of different parts off. What do you do on um, it's kind of nice to get the advice by a lot off Brent um, personal, planned burning kind of suggestions. They actually suggest to do that, and that's It's also because you just basically you can be yourself. You don't have to, like, try to build up some weird for, say, departed. So stand up for what you believe. I know what you're good at and stick to that and just Yeah, what must be yourself. Ah, and that's, like one off the reasons behind that. Because, um, if you like the way I'm talking right now, you probably can somehow you identify yourself with me, Or at least you can see like, Oh, this this guy Robin me Melo has some good values. So you feel like, Oh, if I work percent more If I get suggestions for him, he he really wants to help me. Or he really, um, wants to build up a cool website for me. And, um, yeah, that that that convents should be convincing and way more convincing sometimes than even like showing you some amazing stuff I did in the past. Um, here. So business goals, part two. Um, yeah, I mentioned that already. It always depends a little on you. How much would you use that layer? It might be enough to just have a Norse, um, product to, um offer to your customers? Um, yeah, that's I really mean that if you if you are just in for the money, please don't use my advice. Um, because if you are, you probably will produce low, low quality products and part of, But I don't want to live in a world where you do it basically just want to make money and not just really care about your customers and the relationships between you and your customers. There's more to life than that. So if you are go somewhere else, please. So and then this the other side If if you really stand behind your product So why tell you your visitors about why you you produce this product? What's the story behind it? Why, how he came. Did you come up with it? What's so special about it? And how do you solve the needs and wishes the ones off your customers with that product on ? Um, since you actually standing behind your product, you probably even using it yourself because you're basically off soft your own product. Then on your own difficult with something, you know that I at least that's what I am find is the best way off, Like coming up with 30 years, seeing a neat like in your own life, seeing some need. You want to do something and you see like this this is not, like, efficient enough. And you come up with a better idea. So you come up with a product, and then you suddenly realize, Hey, this product is not just nice for me, for myself. But I could actually sell it to some other people as well and have them too. That's awesome On you should talk about that. You should say why you do that and why you did that. Mm, my little face. Now it's in the way. Products. That's what it says. So your customers appreciated. If you care about them and their feet back and they will know this in, they will notice it in your product. Product. Um, yeah. Take and talk to your customers, talk you to to you, um, to to To the people who buy your products are unusual. Who? Eat your articles or whatever and listen to their feedback. You don't have to look, um, go get crazy about, like changing your parts are too much because of some some feedback you get, but it's always good to listen to it and try to get behind it. And if you see that this feat biggest not just once, but many times, you should like, really look at your product again or your website or whatever and see if you can improve it . In some ways, maybe you don't have to change it all the way, but you can just just some parts or at something tour to actually fill the specific need you heard about a couple of times. So part three. Make it about your audience. Don't push it too far. It's good to do that. But, um, stick stand behind your products to Sometimes the Orient might have different ideas than you do, and it's okay to to to focus on your your um, you're believes as well. But, um, in the way off how you presented on your website, for example, it's a lot about being interesting, being letting the visitors explore your you products. Like I said in some other video earlier, it's about being able to touch it, being able to to hear it, to to experience the product and to get a glimpse off how it would be like if you would actually buy if you actually would own the product yourself. And yeah, so in that way they should want to be on your website. Not because they have to. They they should enjoy being there, Of course. Make it interesting to come back. I want to mention like something later to that about that, too. It's It's if you make if if you realize that you you got quite far ready because then you actually, um, have returning customers and you're returning. Um, like the relationship is building up by by someone coming back and back again. Yeah. Share things you like and profit off and give options to share your content sharing. If we all know it's a big part and our lives nor days, and it's good to, um, you shouldn't ignore that, Um, and this need ways to do that, I assure you, I'm going to show you later from some examples. It might just be like if you get a block article, you can just have some kind of sharing tool on it, some kind of plug in to be able to share the content like some people even drive it. Take it to the next level by having like, for example, a quote you can have, like, your quote on your website. Like, let's say we take this one here and I would I could like, give you some kind of a share, this quote kind of button here. So it would make it possible to you to basically shared this quote right away with Know your audience on Twitter or something like that, You know, on. And, um here I am actually like more focusing on the effect that don't try too much to make something your own If you got it somewhere else. If you if you did profit from something quite a lot. Um tout Teoh, tell your audience wave got it from And would you like so much about it And Bill have a network network that way. Don't try to be some some don't try to exclude yourself from from that kind off world of sharing. Yeah, I always try to get some additional resource is like, for example, I would love to be able to to be able to, but to have the time to give you some kind of summary some kind of pdf About all the stuff I'm talking about right now. Right here. You brought this course on. I hope to do so soon on to give you some kind off shot worsen in form of a pdf document. Yeah. Do stuff like that offer some resources stories, Williams and skills. Let's, like part for before the project tasks to actively support your image, your image in the way of, like, your brand. Your company, I guess. Um, yeah. I've mentioned that early, haven't you? You should talk about there. How come? Came up with your products mentioned the skills you've got show. Show how you do that. So show the process behind something if you if you take a specific kind of material, which is kind of difficult to handle, but has some huge of Pantages show how you how you do with the issues, then. So show some nice pictures about how you come from a to B to C and yeah, um, make it believable in that way off. Not just talking about it, but just giving some insights about how you accomplish that. Um, and I just don't just help but show what you stand for be the change that you wish to see in the world. So we've got, like, different ideas for projects for some projects you could do as I mentioned earlier. I'm not gonna give you, like, one specific project. I'm just gonna give you suggestions and just pick one of them and just do it. If you If you just do it for yourself, that's fine, too. But I kind of think it's a good idea to upload it and to have conversations about it and to get some feedback to your ideas, your little projects. So, um, got a couple of suggested CIA Think how your product can help people. And I think about how your product can help people. That's like, um, the nicest way to think. What part? I think it's helping people helping others. Um, I think this pretty clear by itself as well on and has a lot off thing quite a lot to do with this fact of producing high quality products you can really stand for stand up for. Yeah, um, you will see that probably more more about myself. I do you care about, um um this world and I want I want this world to be developing in a good direction on. I feel like we need to move away more than we are doing right now. And a huge part of it is to try to less focus on revenue and make on making lots of money, but on making this world sustainable place a place which is going to be there in many years from now. And yeah, part of that is not just to get some material really cheap because it's really achieved and gives get more, um, money. But think off the people producing those those materials as well. I can really recommend that movie tomorrow. Domain. It's like a French movie. It's a documentary. It's It's pretty awesome. Can we? Do you commit that? Mm, Yeah. How to improve your products. Tell us a story about it. This is not really clear. Um, but I think I'm trying. Basically, I'm trying to say how Why are you passionate about it? And how can you show that? How can you show that passion? How can you prove showing this that passion? Uh, I feel like this is not the best example after this kind of project, tasks, but it's gonna be a next video. So trippy, right? It's basically just about being able to do bookmarks nicely in in Chrome, and so we're gonna look at this in a second. 16. 03 Research and Strategy EXAMPLE gettoby.com: Toby is in a chrome extension, which, um, a soft front for, in my opinion, soft a huge issue. Chrome wisdom bookmarks, chrome office to us. I mean, you can use them, but it's not really well, well done. It's like, um, it's not, um, customer friendly, I would say. And we look at Toby if we look, once we look at Toby, you would see a different approach to lot off used like a lot off situations I actually can can came to to try out Toby, because I have got this issue myself off. Having often way too many tops open. I don't know how many sites have been browsing, but, um, I'm basically some weird due to Hughes, I don't know, thousands off sites just gets some information off them. It's it's let too much, I would say, Um, and because of that, my computer gets lower and so I have to. I'm always like thinking of ways to improve my my tap handling, and Toby helps was that issue as well. So, um, so what's so supportive positive about Toby? I would say it's like trying to be like a two solution of a solution for the issue off book marking and to be able to manage your bookmarks and to be able to sort your bookmarks and categorize them nicely and easily on That's like another thing. It's easy to use. It's got it's got a nos interface. Um, it's got search functionalities. And if you don't find it, if you if you haven't got a category about that topic right now, you begs eagerly can add a new one. We would see that in a second. Um, it off. It's a great overview over all your book. Mars. Actually, what I say this, um I'm just realizing that it would be kind of nice to have an overview off all the all the categories. You create it like, hey, designer has where you see all those topics. I think till we have, that would actually be nice, um, sort of bullets about, like you being able to just saw the different categories and put them where you would like to have them in this overuse back your way. We'll look at it in a second new top second version. Oh, yeah, we should show you that in a second, because for me, this is kind of user experience happening already. Like listening to some feedback because the normal Toby version, actually, it got installed both right now. So I've got the normal Toby and there minimal Toby and the normal Toby always just pops up straightaway when you open a new top. So that's kind of takes 12 2nd doesn't seconds. It doesn't take long, but it takes It slows down the process a little. So I think they probably got quite some feat bacon about that. And they came up with the new second version. Told me for, like, the power user like me who's always opening new tops like creating and there it's just the normal chrome version where you don't see this. Um, Toby site on. I will show you how I'm using Toby because I've just basically got it appeared. The corner. Mm. So this year, Yes, I a Okay, Sure. You you can pin tops when you want to pin a top. It's gonna be a small top like this, and it's going to stay here in, I think, even if you like, I always have a close my browser and open it up again. I always opened the same tops again. But even if if there wouldn't wasn't the case, you would always start was in fresh brother. You would still have your taps pin tear. You did. I could unp in it again. This front because I'm using that quite a lot right now. So this is too will be here. Um, let's look at the negative for segments. Will. Well, what? I wanted to talk about that new top gear that's related to this feet back here. So the normal told we, um, is a little extreme Was opening new tops. Um, yeah, there's some glitches. That's the big topic. I think, um, I'm not going to talk much about those look in general. Like, actually, that's probably like one off the debt. Most dangerous user experience if you're programs don't work, um, correctly all the way. If they're sometimes happens, something which is not supposed to happen, I just I can recommend to make sure with all your heart, too. I'm trying that to not make that happen, of course, that you might have just, like, get got a beat, a worship going and tell you uses about. There's still somebody. Just give us feedback. What happens for you? Where do you have some difficulties with? But besides that, you should try to make sure that you're prob programs. Your websites work flawlessly, like there shouldn't be any kind of weird behaviors Where where? It's kind of obvious that you did something wrong and because, like, it disturbs the user and the user might think they did mess up something. And Toby, for example, in my opinion, still has some issues. I mean, maybe it's chromium. I'm not using chrome. I'm using chromium here. It's like open source version of chrome. But it shouldn't be like that should be the reason. Actually, um, I think, um, So those glitches sometimes you you you do the normal Toby workflow when you like. You've got, like, this side bar here and you pull a top from this cyber into a specific category. And, um, if you do that, it should be added to that category. But sometimes it doesn't happen. It just doesn't show up in that category. But this top is close to already. So there's waste too soft. This by actually like, kind off. If we open in your top on go so well and you always get this idea of this possibility of reopening close top. So we're gonna em there was this tough in the second through Toby. Um, so there are some bitches I would say and I thought they were fixed, but they still show up. Um, yeah, Another thing. The thing is, it's not integrated into normal into the normal bookmarks feature on there's no export. Still, I think I have looked at it. I have looked for it again, but I still can't find any export functionality, which would be nice to have. Like, of course, they keep you using Toby that way. In this, I'm already kind of I already get, like, ideas. How I could do you is that issues because Toby allows you to open like all the tops in specific category. And once you do that, you can basically book my all those tops here, which you just opened. But that's not really a convenient way. So Toby needs an export functionality, I think. But Toby is not that that old so far. And I think that the guys have done a pretty amazing job already. And come, we probably will see some nice and new developments was So what Toby basically allows you to do on this what you can see here already, and it allows you to sort your open tops straight a way you can once I click on this top. Usually it's like I would open a new tab and Toby would show up right here down here. But as I said, there's two Toby versions at this one right here. Minimal version. So it doesn't do that. I'm using this paint tap here. So what? What it lost you to do, ISS um, so, um, you can just basically take an open top, pull it into, like this Lino CSI effect Apple. I don't know why. Haven't got more rinos bookmarks, But don't worry, I've got plenty of units bookmarks, But you just told me So once I've done that. Look up here, see what happens. Um well, good. It went into San Francisco. Can we pull back? You know, it does more. So what? There was not the nicest experience here, but I think usually you wouldn't do what I just did. So let's try that again. Um, so it's in San Francisco. Oh, let's do it again. So I've got a open top here, and once I pull it into legally Noakes here, it's going to disappear from up there and be part of this. Lee knows category right here. Um, that's pretty cool. Like I'm sorting out my only open tops into specific categories. That's a really need way off, keeping your tops organized and organized them straight away into a specific category into a specific topic. But as I said, sometimes you pull it in here. It doesn't show up in the category, but still is closed. So if that happens, you can still use the normal grown feature off reopened the last close. Tough, because that's basically what told me, does it close set up after adding it, it adding it to a specific category. So, um, now it's opening it. Um, so from in my in my opinion, Toby has got a pretty need interface here already. Get all the basic categories you've opened. You've got open, you can minimize them. As I said in overview, off all those categories might be a nice option. Um, you've got, like, the ability off look opening all those tops straight away. So if I wanted to opened this website here. I could basically push that button. Let's take this one, man, Joe Top. I've got here clicking it. Um, Toby gives you a little information. Of what? The stars. But since it's one top, it's not that dangerous to do this right now. So this one top opens. If it was two or three, all of them, where would be opening at the same time? Ah, so what else is the doc scene? That happens when you when you actually look into told me And then you can switch between dark and light speed machine and you can, like, set up more You can, like, basically sort your products. Your your tops into those main categories, like personal were web design. Um, I'm still I'm still starting with story for no rhyme. Like, Look at this. Like, this is about UX design, and I'm kind of feeling like this still needs to be done better by me. I still need to come up with more and more categories. That is what you probably where you probably see something like we having a lean ups top was only a few links in there because I'm trying to solve them in more smaller categories. But still, I'm not still Toby doesn't nice job, and it's as you can see way more advanced than this week. Book my button right here on Like I could talk quite a lot about this bag bookmark, adding feature here. There's a lot of weird things going on, like with the full. You're suddenly and you certainly in the specific folder, which kind of makes sense or is trying to help you in some ways, too. But you don't want to add some some new tops. You open some of you EPT as a bookmark some other day, and you certainly are still in a specific folder on coming up with the weird names like another state is basically one off those crazy states I've got going where probably have, like, 60 tops open in this another state, which I kind of think like, Oh, damn, I I'm probably not ever going to look at them again, but I kind of want to some day. So I'm just saving them like this and they're gone. But they're not really well sorted. So Toby gets me closer to sorting them. Oh, this But If you could just see, you can sort the spread just grabbing them and putting them somewhere else on, um, days. Oh, you can actually even, like, switch up. I didn't I didn't know that feature. So I guess this s actually switching the active tops with those tops Would be interesting if Toby probably saves the tap. All the taps, your closing. But, um, try this right now. Um, so, yeah, I think off that enough about Toby. Just give it a try. If you like, I would suggest to use the Toby mini version and I don't know, maybe do the same. Like I do was pinned Toby top. Um, so Oh, yeah, I should show you one more thing, because this is the actually really nice, Like another Really nice palatable took. So this was the normal bookmark future here, so I could look at this site. Was this wheat crop future? Oh, shit. I'm sorry. You're not supposed to. So, Toby closest to click on the Toby jacket and then we see the collections I've created already, and we see how many tops I and they're already. But what? What's so nice about this feature here? again compared to the normal book marking top. Now, search for something I could search for. Get your extra let's take you so I could just search for design And it chose me All the tops I've got all the categories I've got where design is part of or in this case, like this. And so we see God, UX design was 57 tops. And you, you are you extradite was one top. I guess I had a collection for that already. And then I created you want, um, so But in this way you can add your tops to a specific collection, and in this case, it wouldn't close that it would just attitude. So if I want to add this presentation about your extra going to my next thank collection, I could just basically kick in and it's at it. And I wanted to end it there as well to both collections. And if I'm not satisfied with this, I could at a new collection on And, um, yeah, that's basically it. It's awesome. It's nice. It's nice. It's a good way off dealing with book marking and and chrome. Mm, yeah. So let's me, let me pass this this recording and then we go to, um, 0.4. Next. I think there ux design principles part which is gonna be a huge part again. And it's gonna basically answer the how it's getting coordinate. But I've kind of I want to keep going. Time isn't it is half past 10. Yeah, So I'm gonna plus this for now. I don't think off if if I'm going to continue for a little bit or not But I think I will have to finish often tomorrow anyways, so see you in a bit off tomorrow. 17. !!!=> 04 UX Design Principles Overview and 1 Key Elements: so video should be coming. So next u x t that principles the main part of this. Plus they How How do we actually accomplish that one? Should we focus on? We've heard a lot of them already, but we're going to dig deeper into them. And, um, it's like I said, it's a good thing. It's a good adhere to repeat them off those strategies and really, um, focus on them and really make to make sure to get closer to, like that kind of, um, ideas off simplification himself. So, um, we got a lot of things here. The key elements of basically just cared meant something. We have road already off there, new energy that will look at them. It's like four kids mentioning there I eat and the hook. Pirate ISS like my for my. I'm referencing to a couple of things here. Aida's a concept. I think I haven't got hitched history part of Ida in here. Oh, I forgot that. Actually, it's I think I don't even know how he's called, but it's done. It's someone came up with either in like 18 98 which is pretty impressive, and it's still kind of relevant today, I think. But we talked about second, and so I'm referred to Aida. Hooked A a book, Um, by NIA Me. Sorry and Shin's near Ile. That's the name hoped. That's an interesting book about how advanced strategies work off, like pulling your customers back into your website. And the Hope pirate in this case Pirate is referring to are a more advanced strategy which basically takes more this hooked, hooked kind of approach on top off, like this simple strategy. If Aida, I'm talking a little bit too much about it already and especially because I'm not gonna talk much about them in detail. I'm just gonna mention Aida and Hope Pirate is closed off them are we got to talk about them in some other class, but there's interesting. It's it's good to know it's good to deal with them if you want to get deeper into like we're being really, really effective. So service attention span. That's gonna be about speed and loading and like how to keep your your audience entertained , then this one is going to be really important to keep it short and simple. That's a really, really, really important strategy to keep in mind create intuitive interface of the UDA user interface design. It needs to be to, you know, like we looked earlier, the usability guidelines it should be You should be able to learn. Learn it fast, and you should be able tow like, easy. Like use it easily. Yeah, structure, social proof. That's what we're aiming for in a general term as well. When we get to the wire frames. Eso How do we actually want to structure our content? What kind of order we need? How? What kind of role? The social proof playing that we've seen examples already. Which do a pretty good job. Give us an idea of how to do is stretch, um in an effective way. Um, yeah, but, um, I think more like a in depth. I'm going to talk about this topic in structure in the wire frame class. Know that this one here, the part about the where framing mm 0.7 is called to action buttons, the SETI ace and 0.8 its usual are some product project risks. So the key element says instead, four the user wants, needs the products solutions, focusing on emotions. Um, we will look at Aida, but big week, um, look at the psychology behind behind that, um, and as last part off, really, really important key element. Just like the simplification of structure the content. 18. 04 UX Design Principles 2 AIDA and the Hooked Pirate: the content. So, um, I eat at the pirate. Either our That's like preferring to pirate. Hooked is this book by Nia Eel, which is kind of interesting. I haven't like I've got it audiobook version by now, but I haven't really listened to much like just the first couple of chapters I did. I didn't see a nice YouTube video about it, which summarizes the content quite nicely. But as I said, this is gonna be happening more in another class. Um, but it's a It's an interesting, um, topic off. He basically looks at something like Facebook, for example, and looks how how is it that people are can't stay away from it? How does it How does it work? How does it trigger you to go back there and, um, even, like compares to slot machine And this this specific, um, approaches to keep keep you hooked to Facebook for yourself? Um, yeah, market sophistication is gonna be part off that class. Then that's another thing. When you when we talked, for example, about emotion emotional, actually, I think the fifth so fifth step off market sophistication. So that's the last step in the market sophistication. Um So depending on how how long this market is existing already with. Nowadays, because of the end of being around for a while, most markets are going to be quite sophisticated. Um, so you could start level one. It's like you could start really, really easily use good, basically saying, I think the example in a video I've seen the body was, um basically, I think like loose fat. Um, that's it. That's the whole statement. Um, the more the markets of the more sophisticated the marketers, the less you can do that. The last you can be that kind off blunt them, and you have to get more to the emotional side of between this, like states where you basically focus more on features, offer product and mentioning why your product, for example, it's that great and the benefits and futures and then, yeah, hasn't said like the last step is basically focusing on emotions, which you can use earlier already. But depending on your market sophistication level, you might have to use emotions to really be part off, the better about which product is gonna win. Yeah, and if the market isn't that sophisticated, you can use easier marketing strategies. So let's look at Aida. Our idea is based on for terms like the guy. I don't know. I don't remember his name. I'm sorry, but like I said, he came up with a very I think, in 1918 98. So it's attention, interest, desire and action. I think this is still quite Gradel in this kind of the way he looks at marketing Andi, as I mentioned earlier, Some say this is not enough anymore, and this little to simply fight. Anyways, there's more to us humans than this. Four states. Yes, of course, this, but it's it's always necessary to afflict simple message we can like. Work was, and you can applied to our websites whatever end or toe poster somewhere out in the open. And, um, there's still a lot off truce to this four steps, it's you need to catch some attention. First was your poster, for example. It needs to be you need to notice it. You shouldn't like, just walk past it. But you should actually like, walk around and suddenly you see, like what? What's this? And then you realize, Oh, this is a post about this and that And that's the moment where you it catches you, your interest in some ways and Paul Syrian some more and then you see like, Oh, this is this is I don't know, the great artist you always wanted Teoh here life. Then you suddenly like, get it, Get into the state of desire and you want your past the entrance now. But you actually want to go there to that event which is promoted, and then you suddenly on the face off action, doing like looking at the phone number to get a ticket for that event on. So, yeah, that's kind of simply fight. But even if our if our sorts or sometimes more complex, we often kind of and behaving a little immature and animalistic too. So I think there's still some troops to that on. Um, yeah, it's It's an interesting, um, list. 19. 04 UX Design Principles 3 Attention Span: different states. So let's talk about attentions. Ben, Um, first, and that's, like, really important. It's really dangerous to keep your customers waiting to keep your visit to smiting Your website needs to be first on, um, in less than a minute. I don't know how when I changed this before was actually I was actually, like, writing less than how did I say it's It is said that our attention span is less than than that of GALT goldfish. Goldfish is supposed to have, like, nine seconds attention to spend. So we're at about eight seconds. You haven't got much time to, um, get this attention. And if you're paints, if your website, for example loads slow, you gonna lose customers potential customers By doing so, Um ah, here. This eight seconds. So also really important is to show process to give some feedback to let them know what is happening. Um, like was forms, for example. Just let them know in what state they I, um if something is loading, show that something is loading. Keep keep in mind that your user might just not be aware of what's going on and if if it takes a second because there is something loading. And he kicked the button, for example, and it's good for them to know that they actually successfully click the button. Just it just takes it a second. Um, so, um, it needs to feel fast. It doesn't really need to be fast. It needs to feel first. That's an important difference. So, for example, loaded small chub in the beginning and then get the rest of the images loading, being loaded in the background, like through a synchronous loading strategies, Um, and again showed the loading process if it's necessary. Um, I said he s all right here and make the the way worse at that time. Show an animation social shows some information office, something to do in between. Like officers show up, up, up, even maybe to sign up for the newsletter. I mean, like, now we see pop ups popping up in weird moments. I think that might actually be an interesting moment off. Like having a pop up when they actually want something already. And then you just kind of use that pop up as a bridge while you're you loading something I don't know. Just, uh, yeah. Um, show how many pictures there are, um, have impregnation going. It doesn't need to be. But it's a good thing to have features like that, especially if there's a lot of pictures. If it's about forms making an easy entrance, it make it as easy entrance burned as possible. Like how many pages off form still have to fill out here. Maybe you could even like, use looking text in German. It's You've got a form, which is basically a sentence you have to finish on. There's like parts missing like words missing, which you can fit out like my name is Sue until on that is a better way of dealing with forms. Um, so the process I've mentioned earlier was about loading this process years about like a pro set off, getting forward in the process off, like signing up or buying something. There's a lot of studies nowadays showing that it's good to revolt. We want interaction, especially if you share personal information so half like kind of a good job or whatever kind of response to to them sharing information with you. Just don't don't take it for granted. Show them that you you appreciate it, show them. Tell them afterwards about what you got to do with that email address and what you won't do with it. And you want to take care? Well, this news, that idea is signing up for the newsletter was really good idea and why? Um, yeah, simplify anywhere is but simply five forms for sure. Like if you want someone to fill out a form and they're not really that into, you know, they probably just ignore you know what? Um, like, there's a new approach, actually, where you even, like, put the sign up, process off the feeling on the form into more through the back into later prose into later state. I'm not sure I wouldn't enjoy that, but I can't see why it's being done. Seems to have, like, good results. I haven't like that Watch much. Was it so far? So imagine like you on our website, and there you can do a lot of things you would usually have to be signed up for and be locked in and be a specific user. So you could like, for example, I don't know. You kind off being able to create your own kind of PdF to put it out to you can create it an invoice. So this website to download a pdf in the and the new approaches even be able to do the whole invoice already to do everything you kind of like to do. And then you get to the point where you want to create the pdf and then suddenly this system tells you Oh, if you want to create the pdf, you gotta sign up now. You can't create the PF was being a customer's us already. As I said that this seems to have good results on. I can't mention why, why? That's the case. Because then you kind of want your pdf now. And you don't want to have it being all for nothing. But I wouldn't I wouldn't like it. I don't know. I wouldn't assay user myself. I would feel a little tricked about it, especially because off the fact that I might feel that tricked At least that might be my for me. I might feel that trick that I actually going on all the whole kind of work. Um, yeah. So, um, another thing don't over. Well, it's often better to leave something out then up to overwhelm with too much information. Um, don't fear off giving, not giving enough information. First, if there really is the need off more details. But just like so, um, this it's often interesting was dealing with customers because sometimes the customers, um I don't see why it might not be the best idea to write a long text. That's kind of my whole issue is like people trying to do their do their own solution, using kind of work press or whatever kind of new modern system is out there to just just do it yourself. I'm kind off you the do it yourself website where you basically throw on everything you've got. And in some cases that works. Fine ended usually does work quite nicely to if, if, um like blocks basically, work was a lot of information, But, um, it's not the best approach to deal with it, and especially if you if you want, find new customers, you have got commercials going. It would be better to have a specific landing page for that kind of commercial and that kind of customer you you want to sell them one specific thing you want to show them one specific thing. And, um, that's always better to keep the information to a minimum. Two more focus on the emotion, and if they really wanted no more use call to action. But excuse more details. But where you then once you're a little bit hooked. Get more information in the process. Not from this dot. Most people just don't read it. Most people just might have clicked on accident. And if you don't catch them with your headline and some some subhead sub headline and some bullet points, they might be going already. You can? Mm hmm. Yeah. Even if there is this more details page, try to be short there as well. Yeah, I'm working on your text. Remove unnecessary parts. Um, keep keep it straight to the point. Um, use images, use a graphics use, use other ways of showing what's going on. Maybe a timeline, maybe gallery. Um, don't stick too much to text or at least use used nice combinations. Mm. I mean, it always depends on what you're doing, but in general, it's better to combine different elements next, giving so the text possible. And we've got another example This distraction. I think that it would almost be nice to have another example, but just for a little break, because there's more. A lot more to come. We're going to look at another website and 24 waist dork. And this, actually this website got it. Backs back on story. Andi, I haven't even I didn't even come up with negative see year and a soda. I don't really need negative. I'm not finding any months. Why do I have to? Um so let's look at 24 ways. 20. !!!=> 04 UX Design Principles EXAMPLE 24ways.org: So I just picked this one maybe a little bit in contrast towards what I just talked about. And but it combines is it combines lots of text was nice Overview Page what? Which makes it different to deal with the whole concept. And since it's a blocked page, the uses the visitors kind of expect to read texts. Um, so what's positive about it again? It's like it's got a nice design and structure to it. It's got good articles again. That's a website about design, as I mentioned, Just know it's got a good overview side Nice. A menu idea, an interesting previews. Next button where you basically can just looks, get to the next article and got some backs back. One story, because it was actually like, um, a Christmas idea off having 24 block posts for Christmas as a calendar, kind of. And since it was quite successfully, they kind of kept on girl doing this. And there's a lot of different ourselves on here and toughness articles on I keep on on stumbling over the page, so I saw why not. Mentioning um, is over. The page was talking about. It's more picture off the also the main title is short description. Received their some comments to it spontaneously, I would think like I wouldn't mind to know Wind was published. So it's pick one we got for developers. Our information, our ticket. Arctic architect architects to, um, there would be an example. Bark post here. ST it. It's got some structure to it. Blackwood's I wouldn't I wouldn't properly do it this like this anymore. But you can see in my presentation I'm trying to keep us. I'm trying to use my presentation. This having descent kind of a good example for using less long text and while like short texts and skip to the next one and keep give you certain focus point instead of just a variety long text. But yeah, that's the purpose off the site. And you sometimes are moved off like reading a long book post. So right. And this the previews next buttons here, which are quite kind of cool. They show you where to go to from there. You this also nice. Sure. You, right now that I can even go over there, um, like Hoover over this part now, even if that's actually the button right here and now do that so I could just click it and then I get to I want to Kill by Sarah. Address now who was like a pretty awesome girl who does a lot of stuff like I follow her on Twitter quite in. I like to follow your Twitter because she she's like doing amazing stuff was green sock on this. There's almost like no one caring about green. Certain skills share right now, and we should change that some sometime because Queen Service just amazing. It's, I would often say flesh isn't debt. Um, because there's green sock and green is an amazing library JavaScript library to do html, um, animations and even, like as we GS animations with, which is Sarah's specialty. So, um yeah, green sort is pretty amazing. I'm definitely going to go to do some classes about him to about it. So, um, yeah, that's 24 ways. That's the menu right here. Archives. Also this boat I was some background story on. You can school. No, I'm on another overview page where you can see this is no no, just 24 articles but just articles about design. So the original idea improved some more. And as you can see, it's got a nod off J. Lo. That's cool 21. 04 UX Design Principles 4 Keep it Short and Simple: so keep it short into, um, use an active indirect language Really important in that. You you will Probably If you if you deal with, like if you if you start like, um if you're dealing was like user interface UX design articles, you will often find the suggestion off using the words off your customers. Don't use some weird's bounce language. Tried to be a simple as your customers. I mean, your customers might be a specific group, and then you should use their language. But, um, yeah, just try to be aware off the way you you choose your words to use your speech and tried to , um, half the customers in mind there as well. Write short sentences for some clean, clear designs. Yeah, we talked about that. I think this should, um, be called. Include white space, not space is give room to breathe. So that's part of like having a clear and clean design don't overwhelm. Was too much content being give some some space. You don't give some move, especially on call to action, but it makes sense to you give them some room to stick out to be being easy thing to focus on the poet check, Carew said. Someday, one day I will find the right words and they will be simple. Just isn't that's quote to that topic off. Keep it simple. 22. !!!=> 04 UX Design Principles 5 Create intuitive Interfaces: keep it simple, so create intuitive interfaces that's really important to so your website should be assembling as intuitive as possible. The last clicks the barrel. I've talked about that already to, um, try to keep that in mind. And, um, this a lot of ways to get rid of clicks. And there's some really creative ways to maybe, for example, to use the over who were already to do something to, you know, you might not have to wait for the click if you do it. If you do it in a good way, you shouldn't like, um, Overwhelm was three. User was doing something suddenly on Justin. No, Hoover. But it works if you do it nicely, and then suddenly the user doesn't need to wait for Click. And once he knows that, they might appreciate that. So allow users to, um, get to where they want. And as poor as fast as possible was less clicks. Less collectors. It's a few clicks as possible. Um, I'm sorry for my arms and probably not even gonna bother to cutting them out. I'm not sure have, like, really hurt myself talking. I'm just going to go through all of it and then look at it afterwards. I know. I do say sometimes on hoping to get rid of it more and more in the next videos. I might not bother too much about it for this one, so elements should given into different off what they what to do with them. Link should look clickable. An image, for example, should be clickable to be in lunch. That's like some kind off convenience convention. I mean, it's a a something which I kind of would expect by now. There was, like many years ago, it might even have happened that you click on the image that opens in your top in the new new brother window on And then, at some point like that cames that show all those jobs good pockets which sudden suddenly allowed you to see that image? Huge as like in the gallery on in a kind of motile window, Um, view on. And, um, yeah, I would. It feels nice to have features like that, and it's kind of standard, and you should know the standard, and you should stick to them. Um, as much as possible. Yeah, this this this articles about that which are quite interesting. It's about, um, to write joined now than member trip, for example. And those articles show that there's a lot off examples like Twitter dusted or Facebook Like All like the big players you can see they're quite quite nicely how they switch from, um, this weird button, um, which is, like, more like abstract to more button, which is really concrete about what to do, where to go to. I could even imagine like we talked about earlier, about like, this button was more details in that case. In that sense, it might be way more effective to have a button instead, which says, Read more about CSS grits. So, um, it's more. It's a little more emotional, actually, in that way and then just talking like the same read more more details, whatever make a whole element clickable. Yeah, that's still happening a lot of times, and I still kind of don't understand how that's even possible. Like, why would you do that? Um, this most of the time, I would are you illogical area to be clickable, like um, and area, which where elements are grouped together in some ways. And if you don't have, like some elements which are need to be clickable there, too. It usually makes sense to make the whole kind of tile applicable. And not just some some part. Um, no. You mentioned the convention already. Don't take it too far. I'm going to show you later. A little like a beautiful website by two freelances. Or like a small little agency. Um, they they've got, like, a really nice designed to the Web site. But it's and it's a little different. And I wouldn't say that's convention, because it's kind of, like, nicely designed. They do stuff their way, but they are quite clear about that. They they still make you being able to instantly use it intuitively. So, yeah, you can You should stick to convention. Um, but maybe it's about understanding. What the convention will part is what the user would expect how to how to present continents are an interface to the user. I'm hoping that I'm happened. You with my examples to show you what? What? The knowledge necessary behind it. Iss uh, So don't try to reinvent the wheel. Um, stick to stick to patterns from test new ideas. Make sure if you come up with a new nice idea to test it, to see when it's what. It's good. But what if it's good if it's bad And, um, also, like, there might be a nice idea which Justus work yet always the existing users, but might still be actually be better. But existing users just used to the old way. And, um, be careful that, um, find a different approach. Maybe find fine show, give gift their users the option of using a and B and then slowly switch to be once everybody like once. You see, like most people having has to, which to be already because they realized, Oh, this is very nice, actually. But give the uses some time to get used to new ways. Existing users already. Yeah, the fastly the user. Instead, it's wood and how they can use to upsets the better. That's quite obvious again. I think a lot off point I'm making here is kind of common sense on It's more about, and we will see that in the next classes to it's more about sticking to those kind of principles here and trying to make sure to keep them in mind and to Yeah, keep to to use them to create your content and your websites not just try to consider them afterwards or stuff like that. Um, highlight links. Make the local clickable use easy to use. Mainers. Um, there's a lot of we had menus out nowadays. I'm not too happy with them. I would say this like, um, I'm probably going to do some class about menus because I've got my own ideas about menus on. I need to test some of them. I'm just working on a new website for Client where we talk about the menu quite a lot. On take some time to to discuss was declined where we should pet to, um Andi. Yeah, it's an interesting topic, actually. It's like there's a lot of ways to deal with the issue on a lot of new approaches, like the hamburger menu, for example, on um, it seems like menus gut a little weird now, days in a little more overwhelming sometimes or not really behaving the same way. Like I don't, for example, enjoy too much if menu, which seems to be like the same elements, and so sometimes days like it drop down menu sometimes there's not. But you're not really sure when it's going to be. There are No. Yeah, I don't know. Many menus. A big toe. Yeah. They make the local clickable. For example, it's just another convention again, which most uses. Just used to if, like, for example, here, If I would click on this Louisville right there, I could actually do that. Um, and I'm on the start page. We could start from the beginning here. Um, that's kind of convention. And if I can't clean, it would feel weird. So I was trying by the way groups that didn't work. Right. Okay, I'm losing control over my presentation here. I'm sorry for that. Thank you. We're done. No, we're not, actually. So let me just I saw out. I start. I've learned a new, um shortcut, which is out back to go. I beg to the last to go backwards at the problem, but I guess maybe it interferes with the presentation because that we responds to Beck buttons. Well, I have to check that out. It used to be backspace, but Chrome decided to switch to out, back and forward to do that kind of movements, But that around two trolls you there was actually a crease off user experience, right? Yet right now, which was not that great, actually. So if I'm if if I would give this presentation to Power User and they kind of would expect to be able to do moves like that, they would feel weird that that's not possible. So that's why. Why? It's good to use your own tools to learn from from what's happening here and there sometimes. So what have we got next? Don't be afraid to break a rule to but be aware of it and maybe just break one click to May and I have the experience to do that. Or just use it on something where it's not that important. Um, so and tested test. If it does, what you you would expect expected to do on if it was a mistake except on correct it on. Don't stick to it just because you have done the work and you wanted to work on accept the fact that you uses might just not appreciate it then. Just not like the way you saw would be what made but way better. Um, so yeah, except except if you If if you did something, um maybe maybe it's just Maybe you just have to accept that you use us are ready for it yet , you know, like Peter Ramps just accepted. That's find. Create a new platform where you go that way, for example, or new website where you approach that that thing. But then you don't have to, um, push your users into some weird news behavior they did. Just don't want I want to deal with. So what else? I don't push it too far. Um, being a little unusual without overwhelming Yeah. Makes sense. I don't like don't be too coming self. Find the middle rounds, I guess. 23. 04 UX Design Principles Off Topic Freedom of the Designer: so don't forget, Picture says more than assault. Worse. Yeah, at this like way could talk more about storytelling are especially visual storytelling. Here posters are like There's campaigns were basically one picture does the whole job for you on. That's why it's so important to use pictures or videos and to combine them was text. And this. There's interesting statistics about how well, how how fast. For example, you can, um um, draw information off a picture while you would have to read way more to get the same kind of information. But as I said, I will do a class about storytelling and visual storytelling some someday and hopefully soon of I've got a lot off classes plant and, like the basic structure already adjusted to find the time to actually do them. But really enjoying this. So I'm hopefully good stick to doing way more classes. Um, so we don't you don't know much. That's really the case. Don't need much. You just I need to have like with you. If you've got an amazing product, just have good pictures off them, like I would show some close up. So So show the the unique elements show why it's like, No, we're spying. So this is a little off trick. I have seen that minute earlier already. Um, just bear with me for a second. I'm just, um this is about a difficult thing, which is going on most of the time. I've seen it quite a lot, and I'm still like I wouldn't be sure to do, Is that myself? And I already like having customers. Whether sometimes is difficult, even when this customers like where the customers say, like you, you we trust you, you in charge. It's often this difficulty to accomplish simplicity, for example, on certain designed just because the customer has different ideas. And in the end, it doesn't really trust your way off saying Okay, we should do this. We should just give this information and then the customer feels like, Oh, no, we need way more So designers off need some freedom, and that's why I'm saying, like bosses and customers often need to back off, and it's good and wise. It's good and wise to be able to give the designers some freedom and not just deciding stuff over the hats and right here, even small ideas might just destroy the whole like or like, a lot off off. Um, small ideas might just destroy the foundation off specific design on Suddenly, it just doesn't work like it's supposed to anymore. Because, I don't know, suddenly there's, like, another element involved, which which changes the whole flow. Like the whole How do you say, Like the whole missing the word? Uh, Let's go. So how about developers? Yeah, since I developed myself and I've been in that situation quite a lot off having to realize designs. Um, it's good if developers and designers, if they that's, like, separate if they work together closely, and if they know how how to work well with each other. And, um, the better the more the designer knows, especially if it's just like graphics designer, more than graphics designer knows about how, what what tasks are difficult to accomplish and what what are easy, what tasks Easy to accomplish, the better. And, um so, yeah, it's a little difficult. I Maybe that's just me being a developer, I would not like. While I would like give the give the customers some ground rules what they can control them , what they shouldn't and can't I would try to involve the developers in the process in the design process as well. Um, I mean, if ma the money doesn't play a big role, and you just like time doesn't matter much either. It might know met at that much, but most of the times you can't really afford having designed develop us doing some fancy stuff, which is not really necessary, and or I don't know, fancy stuff is often quite kind of easy to this certain things, which makes you have been really, really difficult. Like, for example, um, customizing a magenta shop where you suddenly, like change the whole process of how you hold a cart works. Everybody who worked with McGuinty before knows what I'm talking about. Magenta is like it's It works a certain way, and it takes way too much effort in the end to customize it in a certain way. And there's not really much improvement that where Anyways, there is a certain process behind it, and there's a reason for that process, and you shouldn't just mess. Was it just for the sake of it on? Yeah, let's leave it like that lets me with that So related off topics is, the feeling was prototypes. There again, it might just sometimes be a little difficult to deal with your customers. Um, even if it's a lot of fun. And I love working was prototypes, and I'm doing that more and more because, yeah, like like I said, it's fun, including governments. It's nice to like, Show them in real time. How how this would look how this menu behaves in comparison to the other one. If if this, like some line below the menu, are not off this a border around that button or north and, um, I just sing. It's important to keep some capsule ground rules making sure, for example, that you're just playing around here. It's not making. It's not for making rust rushed decisions. Yeah, that's that's the problem. Once your customers see something they like, it might get difficult. Um, even if it's just for a second, they kind of like it, you know, it's it's normal. It's What did you do? You expect? Like someone, um, connects with that that kind off solution? Yeah. Why wouldn't you want it? Kind of, you know? So, yeah, it's it's It can be a little bit tricky. Tricky working with prototypes, at least. My experience so far 24. 04 UX Design Principles 6 Structure and Social Proof: So next up is structure and social proof. So we're 0.6 off seven besides the project task. So we're almost through with your ex design principles to Yeah, I hope you get some ideas off, how to structure your content. On we go, we will go more into details. But just like those simple principles I show you here, they can push your starch and websites quite far. I think, um, yeah mentioned that already we're going to go into more like the wire frames in the upper class I'm looking forward to because that's actually what I can't want it to do with the whole house to responsive website. Um, but then I realized that's, like, way too many topics. So we're gonna have our own class about wire frames on. I'm going to show you. Since it's me we're gonna I'm gonna show you a different tool to use besides sketch or whatever is out there but Islamic. Or how about all those wire framing tools are called. We're gonna look at pencil a an open source solution for wire framing, which is pretty amazing. And again, like many other open source tools, um, not really paid much attention to sadly like especially like special is quite amazing for for quite some time already. And they they even published in your version not too long ago. I like the beginning of this year. I think, um, so pencil is quite amazing. Um, um, I'm going to do like more classes than just about why framing was pencil. Like showing you what you could do was pencil and even like I'm working on the nice and interesting thing in that was pencil is that it allows you to kind of, um, program your own little Why're from elements quite nicely. And you can even use um, like spg JavaScript combinations to be quite to to come up with quite customized mobile little wire frame events. But I was sure that some So let's talk a little bit about visual visual hierarchy and most importantly, probably is like this. What I'm saying here, break the content up into sections. Um, before just go here, intersection sports basically means come up with smaller paragraphs, can use some headlands and stick to one idea per paragraph. Flags start a new paragraph with some spacing in between. And usually it said, I know the numbers differ. I kind of liked to stick to around 50 words the maximum. Um, yeah, just make sure that the paragraphs are too long and that you got some space in between clarify the main Indian men in different ways. We talked about that to already, but as it's really important, we should mention it again. Combined them Combined those elements used headlines up like paragraph picture and repeat it. Repeat it. Repeated label to content in the way off. Like using at lights. Use designed parents and stick to them. Stick to that look, have half a certain feel and don't go, Go. I don't know we stick to the same kind of moved And if you have, like a lot of pages, you shouldn't suddenly annals which around colors all the time all like the whole behavior off something. And if you get a website which has different areas which do need to behave quite differently, at least stick to one kind of color style guide and the same type of typography and stuff. Yeah, I used to have other top lance to guide the attention like guiding attention. Is equity pretty important? Anyways, you can do quite a lot was was that on? Yeah, it's It's interesting, actually, and it can be kind of almost fun, too. Focus on this area off guiding attention on one part, for example, for for that is always to limit their the number of choices. And if there's more help with them on, yeah, help help them to to find what they're looking for. Ask yourself questions. Ask yourself if if it's really working, well, if if it can be improved if this if the process can be simply fight and, yeah, test it, give it to some some friends to your mother, your parents whatever and talk with them about about it used you some screen casting tools where you can follow people working on websites and seeing where they wait, whether get into trolls. Yeah, group similar elements together do that wisely. And in best case, whenever you make it quick and make the area clickable like we talked about already. Yeah, but still stick to a consistent structure. Half city aids and in mind have called to action buttons in in place. And no way they are that No, um, I think about the purpose off their call to action button and be clear off off its purpose and off its position and go highlight words and use graphics. Um, to make the be able to skim. We talked about that small, so I'm sorry. I'm getting a little bit tired. I'm still kind of excited, but this whole topic, But I'm probably trying a little bit too much of pushing through the topic now. Um, but let me see And that we tried to find some enthusiasm, transport it clear message and be a specific, as you can be. Give one off. Awesome solution for one specific problem. 25. !!!=> 04 UX Design Principles 7 Call To Action Buttons: 2.7 is the call to action buttons on this. A lot of suggestions. Who can find a lot of, um, you say, uh, experience this which you can use to optimize your call to action buttons. For example, one is to use get negative sprays based around them, maybe even use different colors or borders or arrows. Just be kind of creative and stick to you like your style, but make them up, make them make them visible. Make them, um, clickable like that. Make the users kind of want to click the button. Yeah. This is like this Pareto rule. I think it's called all I get 2080. Um, yeah, On this on Lee won 1/5 off your content at maximum, which is kind of doing a lot off work. The rest is more like the material around it. So you should always focus on those 20% which are, like, in some ways way more important than the rest on and not maybe just focus, but just have have an awareness off that, and especially when you think of the users just skimming through, like if a headland sapling bullet points called the action um, if you focus on those kind off, um, ideas off how a user might skim through your website. Um, you might be able to optimize in that direction. And that's good. It's great you user uses will. Thank you if you do that. Well, I love Yeah, I've mentioned that as well already. We laid on funnels I didn't but like this whole idea off gift, the call to action, right moment. And be aware of why you're giving a tear. I tried to make kind of sure that the user is ready for that kind of commitment. For example, I hate websites. At least I do where a new sledder six subscription popper shows out the first time I'm on the side, like, five seconds after I've opened it. It's like, Why are you bothering with me? You mean right now with the subscript newsletter subscription? I'm not ready at all. I don't even know what you guys do who you are. Whatever. Beware of those right moments. Yeah, that's an interesting way. Um, it's being like this certain pages we should someday talk about like those weird I think we it's kind off approaches like Click Bank on the pages they produce and the concepts behind click back. But still, it doesn't mean that you you shouldn't use some off quite simple strategies, like creating a sense of urgency or, um, in the invitation to intact right away. Like, No, follow me now, kind off. You know, um, you should put away, But you can do that in any in a more clever way, I would say by, for example, just having limited off us on time specials. That way, you you don't suddenly start lying about something like, Oh, we just got 33 like the last three items to sell right now, kind off, you know, But you can just make some special events and just give a special price for one week. Whatever you know, be creative too. Create a sense of urgency. 26. 04 UX Design Principles 8 Project Tasks: So what have we got for project tasks? I've got no idea what's gonna come up. Oh, yeah, The four key elements. Let's look at them again. So we get users with the world, needs products as a suit solution for those wants and needs. Um, we get this emotion, um, at the psychology around emotions and the whole really important thing about simplification and structure, like the combination of them, them to quit. Important to, um So what should you do? Pick a website of your choice and note down how? Well, which of those some of those key elements meant and why? And upload your notes. Yeah, Maybe do something that I've done with my example. Some off wrote noting down some positive things and negatives. Things. No, that's it. No, you could all terrain the product of your choice and shagging it on positive and negative factors in relation to them. I think that idea's pretty clear as well. On Um, yeah, you could do that was a website or product doesn't really matter, by the way, in general, like I can really recommend noting writing notes by hand, like if you follow me, for example, through the hole Crazy long class I'm doing here to all my mumbling and stumbling and EMS, it's really, really good for the brain to know down with pen on paper, a pencil and paper. And, um, I'm trying to get better sketch noting on, um, I think that's quite a kind of an off awesome approach to to taking downloads and keeping stuff and memory. So I could really would really recommend looking into skip note sketch notes to, um I haven't really checked out a school share about it, but I will probably tomorrow and check out if they some courses about skip schedules. I I'm pretty sure there's, um So let's stop this video here. And I think I'm gonna keep on going and show you this this awesome website here I've mentioned that earlier. It's to to freelance us. So maybe a little agency. I don't know how they would present position themselves. Um, yeah, they've got a quite unique website. I love this. Die this design in style. Um, yeah, Green certain would be perfect for this website. You could think almost do like it's forget it. Greens up would be perfect for this website. They've got their own CSS animation. Two election. I mean, Mr, it's getting quite famous, and it's got a pretty cool website You are mentioning here, Mr. 27. !!!=> 04 UX Design Principles EXAMPLE Wearec2.com: it's pretty cool. As I said before, Landing page is awesome. We will look at that in the second. It's got nights to physicians. It's showing us the progress that it's loading. It's like, even like taking some elements again. You know, like the loading, loading, loading, loading Ike anus taking the logo into consideration again. It's really simple in some ways, and it's it's getting. It's a good example for a simplistic design, which is, like, just straight to the point, but really well done on. They've got a pretty cool work showcases pots and in a way off, like animating, showing you different elements they've done and showing you how they actually go from wire frames over like color schemes to the final result. So way should get the showcases as well. Yeah, I'm just gonna mentioning them. Think mentioning the tool here. It's pretty cool website as well. You see, it s information toe on you, Mr On. Um, yeah, the news. Fake feet is quite nice to like, including stuff like keyboard control showing you some two defeats. Mm. So what's negative? I think like a usual. It's an awesome website which I basically love and if I look for negatives, I might find some, but But the positive is weight strong. So, yeah, I had some issues on the school effect on showcase this site. It sometimes doesn't really behave like you wanted to. You feel like how I you know, You you take, you take them like you click. And then you drag the elements over to the left, for example to move to get to the new content. And sometimes it just doesn't really behave like you would expect it to sometimes jumps back or, like, goes loot. And I don't know. Yeah, that's a little bit, Yeah, This is another issue I always like. I like when I fight someone like this. I kind of want to know whether whether they live, who's who's who's thank you. Who's that? You know, like and in this case, it's I don't know where they I can't find it. I can't find it about like on the about page. I can find it on the contact page. Yeah, that's that's a little weird. I saw it might not really matter much, and you might just like, contact them, and they probably can do everything remote thes days anyways, but it would be nice to know. Mm, Yeah. And the news feed. I had some. There were some minor issues, I would say. Like there was one example way there you had, like, a white text on on a on a white kind of image where you couldn't read the text. I don't know if you noticed, but I had some images here as well in this presentation, and even with my shadow, I put on any sick you still might sometimes not really be able to see that. Well, yeah, always speak Half was text on pictures. Kind of always try to use some kind of bag, not shows to at least help it a little bit. But my something to might either have to choose a different picture or even like you, some kind of box below it to make sure that the user is actually be able to eat it. Yeah, And the news feed also had some weird jumpiness to it. Andi somewhere or I don't really get the order. Sometimes it seems order. Then suddenly you realize, Oh, this is like a month completely different months here. Yeah, There are wood for me would make more sense if it's actually like chronological. Yeah, jobs in this sometimes felt like a little bit like sometimes you click on some element and it just just to the left. And then then it's on all the way on the left. And sometimes it doesn't do that. There was a little weird, but there's there building. Well, really fast. Look at this notes. Animation. So, um, I think I'm gonna leave my my face, all of this beautiful website. I feel like you shouldn't see that all its glory. So, as I said, this is a little unusual on it. Doesn't mean that that makes it not like into achieve to handle. So here, for example, they've got, like, some focus points. And since we've been on thousands of websites, we kind of would expect something like contact work about news. Those are sticking out. Here they stand. Oh, so let's see what happens when I who one of them, that's pretty, um, need, isn't it? And it's pretty clear what to do. It shows you there's something going on here. Contact is interacting. Recess work is interacting with us. So let's click on the boat. We got a nice effect. Nice noting effect that we got a loading progress part. And now we are the page. I don't travels. And so gays genic um, you can see that it's unusual, like it's got a video in the background at those elements, but obviously think there's something happening here on. It would be weird if I clicked on it now and nothing would happen. So let's let me collect on it and see what happens. So she is that you you excuse my designer, Um, having little sentence about herself and giving you different links to see what what kind of work she does. Sergei, Mr. Deputy developer again, like one paragraph and he can get some more information about them. Him get previous of next. What is this so like for me, it's quite of obvious. What does? It's, um, this actually kind of slight show was different pages, and you can use those limits here all the previews and next one thing I gotta mention like , sometimes this page seems a little intense on my Cebu power. I mean, they do kind of fancy stuff, but, um, I'm not sure, like again I'm gonna mention green, some green shirt. So it is not only awesome to use. It's also, like, quite low on Cebu. Paul, you can do amazing stuff. Like all the kind of animations you see here. You could do a screen such as? Well, I'm not sure if it would be that CPU intense. So let's look at an example. It's like actually, the C two is actually their website. They did. So let's look at that. Like the website we see right here. So they're gonna describe us to us how they did it in what they do to, um So here are some basic confidence. It took care off, and that's basically almost everything except six upside. And here again, it's nicely done to see Okay, I got a scroll for more so I can use the malls. Well, like I do not know to school on, I think the most works way better, actually, then pulling because what you can do as well is clicking and dragging the content, which works quite well. Oh, Mary, it was just a bad day. So they take us through the post office, they show us some wire framing and how the whole, like the the action. Excitement kind of worse that flows through the page. Kind of missing the working, um, we see the colors. They decided to use the main forms typography, topography. They show you how the different styles when it's like when you when you use it in response , Like on on a tablet on a mobile phone. Um, yeah, everything that's nicely elevated. Really nicely done. It's an amazing website, I think. I think so. I'm always up for a project like this. If you If you want to work with me, I got a website you would like me to do. Of course not. Not exactly like this. But is it the way you websites like this a lot? Yeah, He was the thing that, like, the news feet on. Right now on sometimes this seems like it would be nicer if there was a shadow below taste . But the news feed is nice to court. Their instinct, which is weird, is happening here, too. Yeah, we got April the 15th of April, and then we get marched on January in November. It jumps of won't I don't really I understand what this always about Oh, and now this happened what I was talking about earlier, where it suddenly jumped all the way over there. Which doesn't really seem to make sense. And this is also a little bit, isn't it? Like to highlight it limits right now. Why is this highlighted here? It doesn't make it the whole. The whole experience is awesome. And then we get a contact page. It was just a normal for my guest. Yeah, pretty cool website. I love it. Oh, here, look at this. You can click under logo on that. You get back to the starting page, which is really cool. All of this. And this for me, a t east. I would say that's intuitive enough to do it. And yeah, I would even argue that far. If if someone doesn't get get it, you might just not be the right fit on because someone who creates sound website like this state, they've got a certain way off looking at design. And you should love this design to work with them or 2222 um, how you them? And if you don't, you you probably should look for some different agency. Okay, So next up is the testing part, which I think it's less content. That's a couple of slights there, too. I'm going to try to get through it a little quicker. Maybe, but actually, I should stick to just taking my time. We got 1/2 like four to probably six our curse class. But now Oh, no. Why not? I hope you enjoy it. Give me a few big please. So let me posit and see you begin. 28. 05 Testing Overview and 1 Start with a clear Strategy: So let's jump straight in. I looked at the slights or anything. I'm just gonna, um, see what's what. It's gonna come back because, as I said, this has gotten huge on. Um, I'm not aware of all this lies anymore. So we got the normal overview pitch again with the different areas on the different maiden slights. Til the first light we're gonna look at is the star was clear. Stop was a clear strategy. The second one's gonna be test your ideas. Listen to feet. Bank collects statistics on bond project tasks. Um, yeah, let's shove into it. Starr was a clear strategy. Nothing if I keep my my usual flow this being one right here. But, um, gonna you know all this. So have clear goals. Well, tonight for me, this is an important part off doing ux design from the beginning, it helps. So much. Was was coming up with a clear strategy was specific goals was a certain, um, structure to follow along. And I was like, really important informations to like the normal way off, Like me going through the user profiles and product cheats, for example, just gives, gives, gives and awesome grounds ground to workers. That's called groundwork. So no, the deadlines set up milestones. It always depends on the project, but it's usually a good idea to have some kind off. Yeah, um, time timeline to the whole project and making sure if you work with a client to be aware off from some deadlines timings like sometimes I don't know, sometimes your customer has, like this idea off off some event, coming up some, No, but they don't really talk with you about it. And it might take a little too long for both sides to figure out how how much time the project is gonna take because of this size. So trying to be precise and try to, um how do you say, set up a A. I'm getting word like I know what they're there. I'm just going before probably too tired right now. So, um, what interactions do you want to achieve? That's a really important question on once you've got, like to your product cheats and user user sheets profiles, you. She were on that question and try to answer that question and tried to get into detail and think off it. Make your mind man about it and just be clear off what you want to achieve, what you want it have they used us to do? Why you want to do have them to do that? What wanted? What is the underlying structure you want get? They use us room? Yeah. Try out Cameron, for example. We can. It's like the open source solution, which I kind of enjoy on use more and more. Not that much, but I'm trying to use it more on, um, I'm gonna show you that to someday too. But communists, and usually, like a really nice way to just work on tasks and structure everything. And if the project is, like even like smaller project, you can you can do some good. 29. 05 Testing 2 Test your ideas: Come on, you can do some good, So test your ideas. That's the second part. Test your assumptions multiple times. That's, like really important about testing. Don't just testing the end 10 test early and often. And, um, if you have it, sanctions don't just, um, kind of I think I got this. I've got this figured out tested and tested again. And as I said, like it's not like was this past way where you can, where users can find their own way to deal with a certain issue, You might webs on a website. You can give them that option. This There's just certain passwords you give your users so you might just offer the wrong past ways past. Um so be aware of that and try to find ways to figure out if you really doing the right thing. And if they might be a better way. Just, you know, don't focus blindly on perfection. If you do testing and if you get feedback and consider that feedback and work with that feedback, you can stop on this need for perfection, and there's based always like some limits to it. I still think it's it's a better way off having like a website putting a website online, which is almost finished. But don't push it too far. Be be aware of the fact that, like, how is it said, like, night? Um, I can't recall. It's, like 80% of the workers. Yeah, Maybe I should have continued tomorrow. I hope you your fire with this kind of Harris. I'm running in here. So let me try to finish this. Trying to stick more to the slights which I left every value late. Evaluate the results. Um, the thing is, no, you gotta try to know what what to do. Next on, um, try to make sure that you make the right assumptions from your results. The results are basically some feet. Banks are like some statistics you can look at on your analytics. Um, be sure that you're making those right assumptions as well. So if you think you got the right way to deal with it, maybe you should think of like, an A B test kind of scenario and make sure that you test again. What you kind of think you should go to. Maybe you should test it with some. I know you that users beforehand before you actually come back. Parts. Take that rope. Make sure you're not jumping into conclusion so fast. 30. 05 Testing 3 Listen to feedback: is that Listen to feed bag, be open to feedback. Yeah, but focus more on the behavior, not the attitude be hey V, not the attitude that's that's the thing with user feedback. And that's, um, that's why it's a really good idea to actually see how the user interacts with your interface on what they do and how they do it. But they're trying to do, um, that's way more important than actually what they kind of tell you about, huh? At least. Yeah, it's it's really good to to be able to watch them doing that. And that's like a nice skilled share video about the whole user testing part. Yeah, she's She's talking about weeks to dine and talking a little bit about giving, like little examples of how user test could look like where, for example, you should encouraged the test us to actually just talk about what they plan to do, what they like to do, And, yeah, just to verbalize what they are experiencing and what how they are interacting to the website to verbalize most. Don't you uses, like the yellow eBay have talked about that like hours ago? Um, yeah. Be careful if you've got running system and take it step by step. Supported. Get give useful feedback. Yeah, off course. I'm, like, really sure why The direction is changing here right now. Um, maybe it's just like the general thing about feet pick t picture people's try to give constructive Andi. Maybe in this case, Yates, it's important because I try to encourage you use us. And while you do use a tests to get constructive feet, biggest well, which you could actually use 31. 05 Testing 4 Collect Statistics: what can use about Yeah, collect, collect statistics? Um, it's really, really important. Make sure to know how to your visitors. Behave. Make sure you know where they click on, even like I'm gonna say that in a second to what they click on or even miles striking is there is a possibility nowadays where you can actually know what they do with the mouse like. More importantly, you should know if someone clicked on the local and what might be the next step they do afterwards and how long they are website. So testing, testing heavily in both was it should be based on statistics, quite a lot to, and there's many different tools to use. Pick ISS, like the nice and great open source toe, gives you the huge advantage off knowing that you're not sharing all the data you're collecting with someone. Some served party. So period should probably usually be the first choice. And it's a pretty well developed to Hey, analytics might be like opposite to that. I'm not sure I can love the idea behind Heap. I haven't used it yet. I've just seen, like, some kind of promo videos on YouTube. Some interview with some guy who came. Looks like part of, like, found off. He, um keep in contrast to Google analytics and pubic has a different approach. That's pretty awesome on just like two sentences. Maybe he just collects all the data. Like you don't have to specify what one track. I don't know how they will. They do what they say they do really, really well. So they should kind of like, be aware of all the when events happening on your website. So if you get some something happening, it gives, um, like some javascript event. He knows about it. He doesn't really care about it yet. It just knows about it. Alright. It just like, collects that data and the interesting part. In comparison to Google, for example, Google just allows you to integrate some specific tracking coat to this button to this logo , so I know I will. I will know that if you use a clicks on that logo, it's being trapped. But I have to do that. The development needs to add this functionality to the website gets more humbly complex or the tracking is not really being paid for yet. Stuff like that you might just not focus too detail about Google and addicts, um, people in general. So the whole tracking my just not happened in that detail you wouldn't actually need in the end. So he solves that by tracking everything and allowing you to filters through, sued afterwards and picking out certain events you want to see. And it's supposed to have, like, a really nice that a bit database concept behind it. So you basically get all the information information instantly. So in a lot of ways, it seems like a pretty need auction. I have no idea how they do with the data. Those cars originally have been originally working at Facebook, and I really don't trust Facebook or Google, for that matter. I'm not sure that he is going to be much better that area, but the concept is awesome. And, um, also they tried to give you a really nice beckoned. I haven't seen much of the back and yet, but they tried to make it simple and to make it handled for developers. So he was quite interesting and they've got, like in open, like they got unpaid version. So 5000 visitors permanence is free completely free. She needs, like, more like up to 50 south. And you can, like, just show a little he blow on your website so you get like, 50,000 visitors per month. And if it's if you want a trick, if you got bigger numbers higher numbers than that, you've got to talk to them. 32. 05 Testing 5 Project Tasks: And if it's if you want a trip, if you get bigger numbers higher numbers than that, you've got to talk to them. So the project tasks it basically fill out that picture since it's laying, that could show you my draft on paper. That's kind of how good feedback she is gonna look in the end. What was gonna upload this like yet you can see three main sections and some explanation on the bottom, where I explained what those areas amend for and those areas I like, I wish. And what if so, the whole approach of this epic sheet iss on giving construct of feedback on. If you don't do any other project task, maybe maybe you could do this one and uploaded. So, yeah, learned to give constructive feet big. I like this approach of this species because it's like, for example, starting with what you like about it in conversations, and you should always do the same kind of principle off. Not Jack telling someone all the things you didn't like, But it's always nice for someone else to hear what you would you enjoy, and it's good to focus on. What do you enjoy this. Well, so Yeah. So you said it was like and just tell things. You you? Yeah, you You enjoy. And then you move over to more like the other part off. I wish. What would you like to change? What would you, uh, to be improved? And then what if it's more like everything which doesn't really fit into the other two category. So it's more like about you got inspired by. So you suddenly got the idea of doing this and that, and it doesn't really need to do have to do with what? You're Steve, what you have seen. What else did I write down? I kind of think like this. The area where you could, like also say, What do you like? What would you like to learn next and give me some suggestions? Yeah, if you like My talking started teaching style, you might wonder if I couldn't If I might be able to teach you some No chance. I don't know. Try using that strategy for critics Said you have? Yeah. Was used. Used that kind of feet. Tell me I don't forget. Teach me and I may remember involved me in that Benjamin Franklin. This is where I think those projects are awesome. David's got a chance. This is where we all should try to always do some kind of project. The body last week joined finished or whatever. By the way. Mm. The finish. The complete completed class off sculpture is not really intuitive to be found. I don't know if you guys noticed. I know I know where it is, but I actually Googled Where to how to, um said it costs to be completed on the app. It's working, but confined the easy, but not out of the website. Yeah. What's next? Oh, full. This is a project off. My, like I've programmed that website together was too graphic designers I'm working with, um so that's actually my own example. I Yeah, let's do this. Uh, I kind of I feel like a shoot. Maybe finish the whole thing tomorrow, but it is a last 33. !!!=> 05 Testing EXAMPLE Wehmuth.de/en/: so I'm straight back again. Um, so being moved, um, is a type of three projects, So there's a a huge bank and to the whole site. So, um, I'm with the Oh, I'm missing enough a word. And that's basically no know how it's called. She's like designer for for clothes. I'm like, that's back out. Uh, she so she is designing clothes. And so I gave. I've given her a nice back, and for that to Andi. We're gonna look a little bit off the design of this site. Look, it's and positives and some negatives. And, um, yeah, um, let's jump into it. So we got, like, really powerful and just she's got, like, she's working with amazing photograph, right? Like, yes, you can see, like, here. I love this shot, for example, Um, she's producing, like, amazing quality close. And, um, I think that's worth mentioning it. And thats like, kind of I would I would, um, make that part more part off the whole off the whole website. I mean, you can see it in the pictures, and, um yeah, but you kind of got to realize at first, for example, that this video is actually like? Of course. I mean, you got to realize that, but like the dress, the dance as wearing in the video which is being shown on the starting pitch, is addressed. She she she designed the whole videos made specifically for her. But that's all kind of. You get it, Realize that yourself, because it's not tell you let anywhere. Um, yeah, what else? We got a cool navigation. I got navigation positive and negative. I'm I'm not sure if I would stick to the navigation like we do it right? No. Still, because they for me, I sometimes feel like it's not the most intuitive way because sometimes you're you not really being told on what level you are in, but we gonna look at that, too. But on the other hand, it's kind of nice navigation. Always present. It works. Um, so quite unusual about the website is that it's girls sideways. Um, it wasn't that easy for me to actually accomplish that all the way. Especially was having a condom mention estimate system in the background, which basically says, like, um, there's gonna be content put in the page, which should always look good. So texts might be too long or yeah, stuff like that. And I had to come up with some my own little plug ins to we make text boxes behave in certain ways, but yeah, worked out quite nicely, actually. I should, like, do block post about them and actually have, like, a website where I show you what I'm doing there with those text boxes and stuff. Hopefully, I will someday and courage me if you if you like. I get a lot of followers. I might even do like a class about those kind of features if I got already. Some designers here would like to go into the programming part is Bob. Um So what else have we got? Yeah. Takes focuses. I just talked about them full screen mode. We've got, like, this weird. So that's what the reason why I've got to on both sides as well. We've got, like, this weird feet hidden feature which, uh, yeah, I suggested to actually have some kind of full screen I can, or whatever. Like something which actually tells the user that that's possible by we've got a full screen more where you can really see the picture of the video nicely. And that's happening When you hoover over those little I could see on the top of the girl punching agent resumes pagination. I can, um so, yeah, we've got a cool, really hidden full screen mode. Yeah, I'll text. Actually, it's I clicked. Terms would ratio. Um, I'll text a huge issue, and it's not good. And we really need to work on them and fix them, because right now they are basically not existent, which is not good for C automation debts. An absolute no go and especially with the page like this, where we had a lot of pictures, images, way fixed that issue. Um, yeah, shop integration is another issue. I kind of wanted to build her shop, but she decided to go her own way. Which kind of it's a nice shop. She she has gotten through one on one. Um, I mean, yet it's can you do with yourself shot, But yeah, we would would be nice, though. Would still be in integration on, like, a connection between them. To where now we got, like, a shopping on that website, but not an actual integration off the, um The dress is to link directly to that specific dress in the show. That's kind of and I would always almost say it's another no go that we've got this issue right now, so there's still some stuff to do, but it's I really love the project. I really love the website, and that is not the right link. So let's go straight to the English wasn't so we've got it in England. Oh, I'm sorry. We've got into worsens. That's the English one right now. So we got a background full screen back. Want slider? The image is always adjust to the available screen. I even, like, made some kind of move. I worsen. But that's just in Forlan's gave moat. No for yeah, just landscape. So this feature I was talking about the full screen mode which suddenly shows up. If you use up here just nice to have, um But, you know, I feel like the user experience would be better if we would. Actually, I don't know, have some kind of nice little full screen. So let's go to the home by quick. We integrated shortly video. She's even got, like, our own little sound. E. I probably should Yeah, That's the mood. Um, you've got, like, a nice little who effect. And, um, the text boxes actually, let me just start with them. Um, because I was talking about them already. So what, you could just see that those they getting white up, um, in a certain way. So the difficult part waas here, I'm using Google and extra trick. There is, um the difficult pub was that it has got a certain haIf. So what? I'm what I actually accomplished in the end is the textbooks, the Texas growing down first and then going to his right. So this makes this possible. That box can look like this, and if it's getting too much text, it would go, um here, Captain graphic. That's the guy's Victoria and Moritz. Like I've done this project results together with them, and it's nice. Um, yeah. So this is the text text plucking and the other plug, and actually, you see here in action. It's the scroll element here. She wanted, like, a neat scroll functionality without some scroll bar. So this is what I came up with this, like another plucking off mind, actually, so you can choose the different collections Oh, yeah, I noticed that. Like, as I said, Way still got some issues. Some English texts seem to be missing. Still in German. Everything's all right. Oh, here's here's something I was talking about earlier, um, to give it good use experience, uh, can actually click the images on See them in this kind of motel window. And there's another were secret feature here. Just could nice to have. But no one probably knows about it. So you can actually click on those images on the left and right side to slights. It's like, Yeah, it's cool. But how? How am I supposed to know that it's just by accident? Someone might figure that out, But no, I shouldn't like we should be more. We should make the user aware of it like I mean, it's not really unnecessary future, but it's nice draft on white. Why shouldn't we, like, somehow show that it is there there, even if it's just like this little hours to show? Yeah, that's basically basically a moot check out her stuff. Check out her shop, as I said, Like she she's doing she's really she's they She is like the perfect example where branding would make so much sense because she really cares for products and really greedy. Um, yeah. Takes great material and dust. Really fancy. Were crazy and normal outfits like, I don't know. Check it out. 34. 06 Thank you for watching: Thank you. Thank you. Yeah, I have no idea how how Like I talked, I started, like, actually recording this whole thing like to no, between one and two in the afternoon. And then I had to do some stuff in between, but I think probably No, Let me see. It's quite late. It's like almost one o'clock in the morning. Luckily, I I don't have to go to one of my customers tomorrow, so it's all good. So I'm probably gonna try to finish the whole the whole view tomorrow on start uploading into skill share our like first. I'm gonna probably We've rise wise. The videos maybe take out a little bit, but I'm not gonna do much to them. I'm just going to see how you like me talking like this. How you respond to it. Uh, because that's me. Yeah, I know. What else is there to say? Let's see There. Thank you. It's like which is no working. So I have got a click. So everything is gone. I've got refresh. Then I've got to get back my face, which we gonna suddenly for change, make a little bit bigger since we're almost done anyways, and, um I hope you have learned plenty. I really do. I really hope. And I I feel like I've been talking a little too much on day. I need to get even straight to the point. But that would be quite intense for me. And I kind off, I just have to fight my way, upload some projects, take some off, like digging this one off my suggestions and upload something. Or I don't even like Cam that much about, like, the uploading part. But just do the do some, some of it to try to to learn, learn by taking some off these ideas. And, um, yeah, try the moment. Yeah. Fill out the feet picture. Follow me on skill share. I think I've said that before on Yeah, I would be really happy if you did. And because if you do and I've got, like, more followers coming, I'm gonna focus blame on teaching. I would I wouldn't mind at all to do that. Like, really regular. Like I wouldn't mind too. I know. Produced one video once a week or something. Um, maybe like for all abuse, though. Yeah, I follow me on future. Follow me. on Twitter. You know, my website for no. And, um, that's the end. So thank you very much. I really hope you inject this, and I kind of feel like this is crazy. 35. Credits: 36. 00 UX Design Basics 1 Unsplash Why and Buying Process: this robbers in the background just for a second. I basically put them in because I like the like. It's It's a good picture, you know, it's great. Chose you almost really fresh robbers. I hope you like for strawberries, and then if you don't you might not like that picture that much. But it's a cool picture. It it really pulls you in, I think. And, um, it's also I also put it in here because off its it shows that product design UX design is not just about Web development, but it could be any kind of product. So we're not gonna have like a concrete products. I'd like basic idea off the BAP side as a product, which gives you information. Um, but it could be strawberries as well. We would beat talking about, um, and the other reason is it's it's I haven't taken that picture. It's a picture from unspool ash dot com, which is a asked an awesome website where you can get high resolution pictures, all kinds of high resolution pictures for, um, like, not only free they it's ah, it's Commons license. It's You don't have to even like attributes. They won the person who did it. I'm going to do that, of course. And they kind of say, Please do that. It would be much appreciated, but basically I wouldn't even have to tell you who this is picture is from. I could basically just use it. Um, so it's a great platform to use to get some pictures and use them. And yeah, as I said, I feel like it's nicer to actually share that source, but it's not necessary. And that gives you a little more flexibility and freedom. Um, yeah. So let's start with the presentation and you extend our principles. This presentation is done. Was impressed. Chance I've been It's an open source tool on. Um, we're gonna go through those slights like you can see here on it's It's kind of my try to show you a little bit off folks points already. Like why I'm using this kind of tool and you're doing a presentation is already kind of trying to show you my idea. Often answer for for a little bit of good UX design in the way of how to present your content. MM, just, um so UX design. It's useful for a lot of things. Some is, for example, answering who, what? Why, how, when and where. Questions Those questions are really, really important anyways, like try to answer them as often as possible, trying to see if you can act anthem really, really clearly like if you if your designer working for customer or is your best customer yourself trying to really get to the bottom off, What you actually doing? Try to answer those questions. There's like a pretty famous tattoo. Talk with Simon Cynic. I think about what makes like business is really, really successful. He focuses down like saying the most important thing is actually the wine that has to do is branding again. Why, how and what why, For him, it's really, really important. Like customers don't really buy the product through logic. They might reason was logic, but that they actually bought by more by it was emotions on that was like a site trick. But as I said, it's really, really good to have a clear picture off. What to add to those questions? I actually try to, um, pull them up more than once. You don't just get back to them, see if you got If you got a clearer picture And if everything is small, precise if you know the why, if you know that, how you gonna do it on? There's different ways to answer those questions. So basically, uh, be relaxed. Just used them in the way you like here in my presentation, I'm going to use them in my own little way. You're going to see that there's completely different ways off, how to even, like, use those questions what party would use them for, But we would see the greater how I how I use it. So UX design helps you to focus on the important areas from the stock. Um, it helps you to plan. It helps you to focus on the customers. It helps you to think about your products in a certain way. It wasn't supposed to be that. Yeah. So, as I said, like, this presentation is huge by now, and I might have to just read it myself. Just think. Think about it for saying what I want, why I'm showing it that way. Yeah. What I wanted to say was that sometimes I'm just like you read it yourself when it's longer . Texas but Brucie, so making good and early design decisions is basically what I already said. It's because you've got the right focus. You're gonna make different decisions. You're gonna investigate scenario. You gonna focus on a certain aspect. You're gonna try to be more like this answering the How can I solve the problem? How can I like how can I solve certain problems? Um, and that makes that should make a different decision sometimes. Because, yeah, you will have to be more precise about what is What is the customer going to do? What what do I need him to do to get through the whole process? How how I make my got to get going to get the customer from a to B to C to D and can I reduce those processes? Can I get rid off, see and just jump straight to de um, and then there? It's not much about like how something looks, but basically how it works. How if it's useful, if it's if if the custom can use it nicely like normal process, a normal question would be like how to buy a product if it's if it's fast. If it's good like you get Amazon How fast you can actually like, Find a product like search for product to find it, Click on by it. If you're locked in already, you basically clicks two or three times, like choose the address you wanted sent to, and you're done like it's gonna be the payment. It's settled ever since settled. You're gonna wait a couple of days and you've got your package. You get your product. That's like that. There's a design process behind that. And, um, Amazon might not be the best Bush example nowadays, but they do a pretty good job in the whole kind of scene. And, um, UX design looks at those processes over and over again. And you gotta test that you're going to see if the customer has problems here and there. By the way, you're going to see that I'm going to repeat myself quite quite a lot through the whole presentation, not make maybe not quite a lot, but, um, we're going to talk about some off those points I mentioned a couple of times. And because they aren't that important, I think on, um, yeah, just one example about buying process, because I've actually bought a book by from smashing Smashing magazine to come. They've got, like, a design pattern book. I haven't gotten it yet, but that, for example, was a pretty amazing buying process. I haven't got it in here, for example. But I was, like, even like, thank you. Thinking about taking it in. So I'm talking about half a second, and I haven't I've never done it. Never bought a product like that. I've got, like, a PayPal account for many years. I know. And, um, I mean, sometimes you use it for paying for Porter. Well, in that case and smashing magazine, they even used, like, the future of PayPal to to to use PayPal for the whole sign up process. So I haven't got gotten a smashing magazine kind of blocking or anything, I don't know. So I basically clicked on the book, clicked on by click on PayPal like, use PayPal. And then what happens is you used your papal address to make make them send it to you to that address, and then you kick on in the next step you kick on by was paper as well. And you're done. There was like, I think you might have been like the fastest way off. Buying a product like a book was it was crazy. What's really, really good? Um, so let's move on. 37. 00 UX Design Basics 2 Product Quality: being on track. Yeah, for me, it's UX. Design is a lot about planning and structuring. So once you've done that, once you've got that wire frame and, um, you stick to it, it keeps everything in balance. You know what to do. Yeah. Yeah, I've done. I've I've said this already a couple of times. UX design, basically, for me, is understanding needs and solving problems. Needs of your customers solving problems in the way off your product or you're like you're like products Could mean a lot of things. It could be a website. Um, no solving problems could be a lot of things like the product could be a website. Just getting some information. Um, physical product. Just to be clear, that could you can use that in a lot of different ways. By the way, this this class here is gonna be a little more abstract in the next ones. Like when we're gonna talk about user profiles, we gonna have, like, an actually she which we gonna talk about and you should fill it out? It's like part of your project. This class here, I'm going to give you a lot off little suggestions for doing stuff like doing little projects. But this year is a little more theoretical. I hope your family I'm gonna get a little bit to drink for a second. Let me post this for six. So, by the way, this presentation has, like, five main parts. This is, like more like they're starting overview before those main parts. And in those main parts, we always have gonna have, like, examples which are going to be like, probably they are unknown little video where I'm going to show you the website and show you some positive negative parts about them. I'm just for your information, we should switch sluts there. So, um, we probably can go. So this one a little quicker, But you accident helps to No, your customers better understands. Understand your products and solutions. Learn how to present instructor content, Know what to focus on to be effective. Let's just leave it up that so the mangle, the main goal er's you want a strong connection between your product and it's going consumers its customers is its visitors. It's always about that strong connection. They're stronger. That connection is the better. And that's what what? Where it seems to be, like, really effective. If you take branding into account as well to use your your company Asus support for that to show them that you're well use Good that you actually produce product, which aren't like there's like this example of, like care product, for example, where you I mean you can just need things and they're quite cheap. But this is example of saying it's nice in the front, but awful in the back. I'm putting it up and down like taking it apart again and then building it up again. It might not last that many times a good product would be, well, well developed from front to back, like there's not like some bad hidden parts inside of them, like No, like, I feel like a lot of electronics parts right now have, like a little like timer inside, Kind of which, which kind of say, Okay, this those had fallen steak they should fall apart on, like that one off them shouldn't work in, like, three years anymore. You know, it's like the guarantee guarantee. What what things were. Ah, you know, you get like a two year, two year won't I think After that they kind of want you to buy a new hat phones. So, um, that seems like that's a bad idea. And the more you you actually can stand up for your products and say our products are really high quality. Don't worry about breaking ever kind of you. Um, you would more likely buy from that company. I could show you, like one off my skateboards, which is It's amazing. It's loaded, loaded, long board and I've got this for 56 years now on. I'm using it a lot like a lot, and I'm like, even too heavy for the bought. And it's like, really flexible. It's it's just awesome. It it's probably gonna stay like this for another. I don't know, maybe it's gonna break at some point, but it's just really, really durable on. Um, the nice part about that is I really believe in that company because of that. And I would always consider buying another loaded bought because for that reason, and that's like this strong connection they achieve by being company who stands behind the product. I mean, in that case, they gonna use the product, the product themselves, which is always a nice thing anyways, because once you use your own product, you also gonna realize what ISS where you can improve your parts. Um, so let's look at the questions I went down here. So what does it even mean? I think some of that. How can this be, Chief, we're going to look more and more into that. 38. 00 UI vs UX Design Example: for just for a second we're going to talk a little bit about you, I and you, X or like I even like the term user centered design a lot. Um, you see, D often the show reasons UCD So you I issues interface three exes user experience and you city user centered design What you understand behind those terms, my differ little. We're going to look at different definitions later on how you do with them, what you gonna do because off your interpretations off them that those terms might differ quite a lot to, um, but just for a second to talk about your eye and you eggs there's often like if you google it, you can find this past way image. I took it another one myself, which I'm gonna show you in a second. We see, like two passes and oneness like example for you and the other one's issue X on your eye is I would say, it's something term off your ex. So ux design. It's more looking at the whole process. And you I is like designing their user interface itself. A ketchup bottle, for example, like the old ketchup glass ketchup bottle is Mawr is in some ways is in your eye product. It's like the user interface. You want to get your capture and you buy this glass, this old glass bottle to get the catch about and yeah, it might happen to you that you want to have, like, just a little bit of ketchup, and you just open the bottle and you're gonna end up with a lot of ketchup on your plate on the other way around Is you gonna reach the end of the ketchup bottle, for example, and you never really going to get everything out of there because the whole bottle like the cold last thing you can t put it upset down. So, um, the user experience side shows you there's some issues with that that bottle. So someone came up with the idea of a plastic catch up tube, which you can put upset down into your fridge. Some say that's even like looking better. I wouldn't agree. I think like a good glass, while always is nice, a big also nature wise, it's better to stay with glass. I think the like all you can empty the whole plastic ketchup. Um, easier as well, because it's you can put it upside down and keep it that way. It was out, like being worrying about it falling over. Yeah, I'm going to slow down a little. As I said, I'm going to trade. Tried to take my time. This is gonna be a long class. There's no reason to rush. I would I wouldn't mind to have, like, actually created like like, you know, 40 minute class. It's not a 40 minute craft, so I should just accept that fact on, I hope I'm giving you a lot of value. You enjoy my class. But as I said, I'm not gonna rush J just enjoy it. Don't worry about it too much, but what you can see, he is a picture on the corner, basically, which isn't. Thank an awesome example off. Um, how you x and you are any different because here on the right, with their colleagues, it's like my way to the train station would signal. Um, with the colleagues are there's traffic lights to pass the street, which is right here. Um, so that the traffic lights are here. But as you can see, the walkway is here, so to actually get through this train station. Someone saw. I don't know why you just have to move 20 meters over there, used the traffic lights, and then you can use an old pass, but, um, as softness and normal, you you don't you don't. You wouldn't agree to that. You don't want to to go all the way over there. Most people I would, um I would think on, like living here for a little bit of time already. I would say most people basically just walk here on. We're going to zoom in here in a second. That's where people can walk. This is not supposed to be walked there. That's like, That's not part of the user interface user interfaces Over here, you're supposed to walk here, and but that's what people are gonna walk because that's where you come out off. You come out to and the street like, OK, we have to say this street. There's not that many casts on it. You can always find a situation where you could just Passover. If that was not the case, I would probably be really annoyed, because then I would have to use the traffic lights Um, yeah. So just one thing, because because I think that's like, really important, too. And, um so websites might just give you one way, this one, this weird, 20 minutes, 20 meters just right. And then use the traffic lights kind of situation. And, um, you might not even know that that's something we use that doesn't really enjoy because you just give them that way. And there's no way in on a website to use to make your own track to to choose for yourself to walk a different way. I mean, maybe there's two ways to get somewhere, but then you actually designed you're user interface with two ways you might be able to search for something and go that way, like use the search bar and put in a term, and you might use the normal navigation to get them. So then you the user interface would take that into consideration already. But usually on a website, for example, that's not going to be the case. There's no way to to use a different route to to get where you actually want to go or where you would like it to be. That's where it's important to actually do user testing and to take feedback into consideration toe always like. Use your own products to see if you can improve them. Um, so let's look so there. I can't click without my image being lost. Um, what you can see here is the dark picture. But you get the first year off. There is Oh, no, for some reason this. Why doing that? Sometimes it's doing too two clicks in just one which is supposed to have so you can see it on daylight. That's the past most people are using. You can see how this is just not supposed to be there, but look at how how many people have been walking here. That's and there's not that many people living around here. So you can see this sum that user interface going on, um, a different example around the corner, like we were actually standing over there somewhere, actually not around the corner. But that's basically just to give you 90 year. It's from up there. It's from the train station. If you look down, picture didn't work on the picture any. It's like taking was my welcome. It was my from that old phone you can see here. This is better user interface design. Because here you can see there's a long way long rope. And there is this this path here to to allow, um, your users. So you're the people walking there to take a shortcut to walk between those greens. So there, that's better. User interface design right here. I could even you mention that this has been added later. But at least, if that's the case, someone realized okay, this is not there was not a good idea to send everybody around this long corner. They just walking over the grass, so maybe we should give them a pass. Um, I think it's time for next video, so I gotta post this one for a second. I'm gonna continue right away, but I just feel like I should probably do is more like sub videos to have not that many that long. Use just a second 39. 00 Background Story 1 About Me Skillshare and Open Source: it's just going. Okay, so let's talk a little bit about the back on story. Why we had talking about your ex design right now and not about how to create your own responsive website. Which I What did you do? A Z? My first tutorial. So this is like there's a lot of text in this presentation to As I said, I'm still not really sure how to deal with that. Sometimes you just gotta read it yourself, so But what I said earlier, I've been working in this field for six years, panel creating a lot of different websites working in the agency. Doing back ends with was like a pretty famous condom management steam system, for example, called tapestry, um, creating games, creating whole websites, kind off, you know, from back to fart like the only the only thing, for example, which I didn't do. The and the agency where I have been working was actually designing, but websites. And, um, since I'm, like, interested in user flows anyways, more more came to the realization that I wanted be in more control over the design. A swell. So this is part of my company. Know that I'm doing the whole process, talking with, like meeting a customer and talking with them off if about what they want to do, going through the whole process off doing user profiles, product sheets, wire frames. Putting that into prototype during the last kind of bits and then creating like a nice looking website was usually, um, content management features. Yeah, I have highlighted open source here because I love open source. It feels a little weird for me to even, like, put this video on skill chair as a premium video because, um, like, open sauce has done so much for me. And, um, I want to give more back, Um, and if he is a little weird to have this product as a product, which is premium, which you can access, like which is not completely free, But you have to be a premium member off skills ship. But on the other hand, I know the concept off skill share being like quite cheap and giving a lot of well value for those, like, 10 bucks for months. Um, so this is my in between solution for now and once I've got my my whole company, little father developed more and more gonna focus on projects which got just getting, like, help, help humanity Kind of, you know, working on the 17 sustainable gold and working for NGOs like friends of mind created their own NGO. And I would love to. We actually working on a project already, but it's just an idea way haven't got much support and no money for it. But I want to walk on those projects, and I have to kind off get some passive income for that. So that's why kind of choosed of choosing like like between, like that. Say YouTube skill shared, you know me. That skill share seems seems to be like a nice solution in between with a great community. I really, really enjoy the community here. You guys are awesome, and there's a lot of awesome videos and more and more times standing here. I'm really I'm really happy to have choosen skill shell, as I said earlier on, but you use YouTube a swell and posts, um, videos about lee nooks and, for example, but this tool I'm using here, um, but for now I'm using scooch. Ask my platform. Two makes a passive income. Um, so that. I mean, go back for a second processing because I need something to drink again. Mm. So I went back for a second because, um, the last, because of the last things, if you're in the field off developing and designing websites for a while, like I have been you you've seen the whole scenery changed quite a bit. And, um, me being always entranced, id in new technologies, new waste I off and being like a free spirit, Always trying to solve things a little differently. Um, absorbing. I got it. Click here for a second. That's gonna ruin the whole set up again. Um, I've got my own waste to to find solutions to decide what to use. And I think some off those approaches, I tend to go for especially like, but made basically focusing on open source, um gives me a lot off like unusual abuse, which, which have, like, quite some power inside. Like, for example, you using leaders as the main operating system for many years now, Um, the whole system I've got and I can I besides, like, let's say sculptures, maybe the first little different part. But besides that, I'm I can tell you everything I do. You basically can do once you've got a computer and that computer doesn't have to be that fast. Um, the tools I'm using up all open source, Um, and because of going that way, for example, there's certain certain decisions I make which differ from from the standards on, um, make me but make me find things which are awesome and nobody really knows much about on. I want to share some of those solutions like, um, this amazing stuff going on to give you an example. Neos neos neo CMS It's ah, and it's just has started a side project of type of three CMS A condom management systems and NEOS is like really new product product, and it's just amazing, like there's really good programmers behind it, and they they really try to make an awesome kinda management system. It's based on, um, a lot off new ideas in programming. They've got, like their own PHP framework to run the whole thing and this amazing ideas behind it, like it's more. Once you you've got a hangover, you can get away. Better user experience on the on the back and side off off off the website. Um, but still, you don't least lose control over like, I have never really touched WordPress much because for me, there wouldn't be, Um, I, like have, like to use system, which really gives me a lot of control and really do just thinks well, like tapestry for me is like, um, type of street as a lot of things really well, Like translating translations, for example, you can easily set up the type of sweetly website in a lot of different languages, like parallel languages. All kind of, um, manage nicely. And as far as I know, for example, where first has some issues with those kind of and test and NEOS is for me no, like a more modern approach and takes you like, takes the whole idea off content management system to a whole new level. But not many people use it yet, though this like huge, huge customers they've got. But now, but it's still, like, quite unknown, and I'm at some point going to do some videos about NEOs, and I can just tell you it's it's pretty amazing technology that just one example neos dot io site for it. Um so I wanted to start with, like, a responsive, like, responsive website on, um I've learned for a couple of friends of mine on the thing was I realized to even do that in the way I do it. For example, a T least is you need some tools. You need to have a console console like I do here, and you've got to run a commander to to actually be able to set up the website in a quite nice way. Like the console, for example, at that case comes in for specific programming purposes and being able to use more advanced solution for CSS, it's called Suss s s s A s s, um, which allows you to use variables, for example, and usually CSS. It's, um, not capable off certain things. And Suss gives you a lot of more freedom, a lot off, more abilities. And yeah, when I went through all those, I decided, OK, maybe we start was look for landing and structuring websites first and then from their own . I'm gonna I'm going to show you how to build responsive websites as well. But for now, we're just going to stick to to the planning and structuring. Uh, yeah. Just focus on this stuff you like you're interested in. You see me already? Like talking about some developing developer expects. Um, I'm gonna do that. Try to do that a little less and really focus on your extended discourse. But in general, like, my classes are gonna be on different topics, and I'm gonna try to stick to one specific topic like the extra down here, and move on from there. But you you should still be able to just, like, look at the second part about user sheets and learn a lot off that a lot off things out of that without needing this curse about ux design. Um, yeah, but I'm going to try to show you Mullah the whole process off coming, starting a project to finishing. 40. 00 Background Story 2 Reciproka: starting a project to finishing. Mm. Yeah. Like I said I wanted to start. It will show you how to build a responsive website from scratch. Ah, you can see the UL. I'm going to show you that my first example and volley, like, 10 minutes and so on. We see progress. You see, um, they've got and a they they're working on a new field. It's called Cooperative, um, ownership. It's We're gonna talk about that in a second, just for a little bit. Um, cooperative ownership on the whole website, for now is like, really, really simple. It's just been done in a couple of hours on end. The result is already kind of nice, but we will see that it needs a lot of improvement, too. And we would talk about which What? What? It's nice already. What should be improved and over the next couple, of course, is we're probably gonna probably gonna work on that website some more and meet with them and, um, and proof improve it to the good looking website, which yeah, communicates nicely and effectively, So yeah, as I said, um, yeah, basically talked about all of this already and the power was starting to split up into smaller parts. Onda up be doing this months the presentation right here, which was not really planned. Um, I hope you you still enjoy it. That that I put a lot off content into the u x desire class here. And so, yeah, um, a great way to work on websites is without adult using 69. That's I think I gave you a couple of reasons. Why? I think so. It really helps. It really helps not making the results better. Answering the questions and especially like being effective, efficient, like building effective, efficient and satisfying websites. It's It makes a huge difference. And we see we look a lot of a lot about how, why and how this can be accomplished. Isn't Empress awesome? Um, this tool them, you know, I'm gonna use a lot of different terms. Sometimes I'm going to talk about the user, about the customer, about the visitor, about I know, um, the consumer. Um, the main idea actually is, especially with you 69 I think is to half the human in might have the half a person in mind to talk to to that person was like specific problems. A person was a certain needs and your understanding off that need. And you're, well, sort through solution. So whatever time I used, it's about the human. Yeah. Mm. Yeah, I told you that already. I'm gonna focus on skill share this. This Siri's is actually gonna be exclusively on skill share. And for me, it's gonna be a huge experience off your feet bag. If you do got to do the projects, if this is actually gonna watch the couple off, like, a couple of times or even a lot, I don't know, I would be here really helpful. Happy if you give me some feedback to it. If you give me some self If you if you follow me and make me belief and and in the platform and supporting me and me and the idea off doing more videos on. Yeah. Just give me Give me lots of feedback, please. I would really enjoy that. Really? Thank them to consideration. And, um, I've started to do projects myself on school shoes. Actually, it's one right now, um, even for class, which was not that important for me. But once I've done that, it was just, like, done really quickly. I realized it's good to actually do the projects. It's really, really good. And sometimes you see, um, classes whistling, even zero projects being done. And, um, I love the idea of geisha focusing on projects more and really supported the idea. And, um, you learn so much more by actually doing learning by doing basically yeah, so I can really recommend do small little projects. And I realized, Don't you don't have to, like, stick too much to some suggests, like just take the product object idea as a suggestion and just do whatever you like. It's an answer to that class and just interact with with trying to to show what you've learned from that class. 41. 00 Background Story 3 Platform Impress: huh? Yeah. If I get the feeling that you actually like what I'm doing and that you want me to continue , I will probably, like, set up platform forward. And actually, I would love to show you how the whole process would go, um, to plan. Does this platform to show you the whole the whole process I'm gonna go through to come up with that platform on? It would probably be about ux design and UX design principles. Um, Andi would have like, yeah, presentations like this one on earth where you could go through it yourself without having to listen to all the stuff I'm saying about it. Andi, I would even like love to to put up this presentation here right now, but I'm working. I'm actually like extending this open source impress Js um and this is you can see that the next light, I think talk about it. So But this presentation isn't already at this like bucks in it. And I don't really want to have, like, a bloody solution online. I can show you one of these bucks. This is like, full in full impress jazz. I think it's called Get up. So when I click on the back here, you know that my picture has been gone too. That has nothing to do with that buck. But where's the picture? What happened? Whoa. Like that. That's not supposed to happen. And that's basically, like, the only bad. But I'm facing now. There's another issue. Like, I'm gonna use the script malls. Well, right now, to move to the next light computer is a little struggling, but the most real is my I added most were to to this tool. The problem with this amounts with this. Um, if you scroll too much, it's gonna go crazy. It's gonna go, like, over a lot of slights. And there was, like, just a little bit of scrolling. I just did, Um, that should be that way, Andi. I will have to do to deal with that issue as well. So But as I said, if I feel like you enjoy what I'm doing here, um, give me some feedback and I will probably work on Platform two, make it even more available, and to make you be give you access to those presentations html form. Like, um, I'm thinking off like using you. React set up I Where you where would basically be able to create presentations like this? Was Jason file on? Because once that is done, there's, like, even a solution on, like, an idea to do that on Get Hubble to think, Um, then I could even, like, built, built a nice interface for you. So you could, like, do those kind of presentations yourself on. I mean, I don't know if you ever have used crazy Um, it's like an advanced version of crazy, I would say, because it actually is, even in three D like you can see here so impressed. Jazz is probably going to be more and more topic of my courses as well and just give you to give you a quick idea. This is the whole presentation. It's all HTML. It's like just in the browser window on its like I can click through. It was like space or arrow up, down, left, right. I can move between the different slights. This is all just basics HTML and CSS s M. And one cool little javascript black in which does an amazing job being quite fast in what you would like. This solution is look at it. It's like pretty pretty smooth and like I'm recording yet this left of It's like I think it's pretty five years old panel, which makes me wonder. I think I'm in the business of development longer than six years. Put this letter is quite old already. So this is It's not that difficult. I mean, there's a lot of things to it by now, and I'm extending it like a sad like, um, these slides here, for example, they there's some work off me, extending the basic feature to make it able to make me being able to not having to position this text somewhere. That's usually what you would have to do. You would have to position this text somewhere. And, um, I've found a way to get around that to basically, like, calculate how hold huge this Texas. This is still to figure out how big this text ISS, and because of that information to set the next text in a little more distance in the proper distance to the point. And um, yeah, you can see here like this data eggs and why, and rotate on background color here, for example, I'm using tuck eons I'm not sure how. Well, I like tacky ins. It's just like I love trying out new things on turkey and it's a way off, um, styling your your websites on in its classes like it's basically C s S m u use. But this year's as is in form off, like tiny little classes you put off your content. So it's like I'm not I'm not that good at Taki on yet that I'm always like doing a really good job. Like, for example, here you could see that I'm using using in HTC H Street attack, which is the headline. But, um, tak e on's sets up this size was six, for example here. But this is over written by me, Andi, that should be that way. You should, like, stick to one of these solutions. Um, yet, but creating a presentation like this isn't that difficult, I can tell you, and if you like to, I would teach you much more about it. And it's all open source. You don't have to pay any money for it, and you can do amazing stuff with it. Um, yeah, let's go back for a second. So, as I said, it's impress Js. It's an open source tool. Get half dot com if you're any way were close to being a developer. And even if not, I think get up is an amazing resource on there's so many cool projects on Get up on like get, um, get it isn't made in the amazing tool itself, Andi. It's being part. It's gonna be part of another class. It's done by by the event inventor off Lena CSA's Well, Linus Tall walls. And, um, he is he is actually like If you listen to some talks of him, you realize that he's not like, even feeling that proud off Lenox because that's he's just taken an idea, a little father. But get is really like there's a lot of work by him put in to get and, um, get this amazing, like in so many ways, and you can do unbelievable stuff on one. We really awesome to think about. It is how how the open shot sauce will change because of get and get up is like the probably far biggest platform for open source projects on Yeah, so if you just look for search for impressed form and on the get help page, you would find the tool I'm using here, but as a set of extending it a little bit already so you wouldn't get the same results. But interest fool gets gives you a lot of features already. Like actually what I talked about earlier, how I how I managed to, um, calculate the distance is like one of the main job things have changed for No, there's gonna be more changes. But that's the one I've done so far. Um, yeah. I hope you enjoy him a serious on. And, um, I mentioned earlier that I would love some feedback, and I actually got a feedback sheet I'm working on. It's, like, almost ready. So it's gonna be ready on in a couple of days to it's gonna be up, are blowing right where we're gonna upload the whole this whole class on, um, further out on. Tell me what you like. What, you don't like stuff like that. I'm gonna even, like, probably gonna do some classes about feedback sheets and would probably extend my platform about feedback sheets because there's, like, an amazing way off doing feed bags and giving constructive feedback on, um I will say Tell that later to you. But if you don't do any off my suggestions for projects, maybe take that as your project to just fill out the feedback sheet and upload that, Um and the nice thing about it is like it's Let me see. I like I wish. What if that's like the basic structure of the feedback sheet? Sometimes it's called Start, stop, Continue. Andi. The whole thing for me is it's about a set constructive feet. Bank on. Yeah, just have a look at it and fill it out. Uploaded A polluted, please. She elected. So this is gonna be a cup. Now we're going to look at the website I've started for for my friends.