 Hello, everyone. How's everyone doing? It's a really big crowd today. Not really used to that Thanks for being here. I'm going to talk about accessibility needs style design revolution Who am I? I am Mitchell. I am a digital designer at level level But I'd like to talk a little bit about my history first. I think Back in the days the earliest as far as I can remember I've always been a creative a creative person my earliest memories includes drawing with a pencil painting Making art projects at school name it everything and I think a lot of you people as a child were kind of the same like me Because who didn't love to draw as a kid Now the older you become most of the people lose that interest But to me it never really did actually my love for art only grew stronger as I got older I kept drawing I made beautiful portraits of people And I loved art to look at art architecture. You name it all around But as time flies by I was drawn to digital art and digital design technology advanced there arose new opportunities and My old traditional skills actually got lost because I did everything on a laptop or the computer But people still try to see me as a as an artist and I often got the question. Oh You're an artist, right? Can you draw me like one of the French girls? Okay, sure only to come up and let them down with something like this okay, anyway years later now I Find myself as I call myself a digital designer You could also call me a UX designer experience designer interaction designer visual designer web designer It depends on who's asking What are the most important thing is I try to create my designs with a mindset of an artist I Like to make designs that are functional Use a friendly accessible, but also aesthetically pleasing and visually compelling To me it's not enough to make something that simply works. I Really try to make it a piece of art But now I hear people say a web designer is not an artist a Designer is a problem solver in maniac. I Think people know who they are Of course, that's true But why can't we be both be the problem solver and be an artist and combine those two skills To come up with the best and most beautiful creations I Had a lot of animations, but it's not really working. That's okay But wait a minute if we look at the problem solver and the artist and I was talking about the professions a little bit before We could see the problem solver as a user experience designer and the artist as a user interface designer the user experience is about Experience and user interface is about making something a little bit more pretty So if you combine those professions you've got the user experience user interface designing Someone who can do both We should use the skills of both to come up with the best and beautiful designs So we should solve problem first make it accessible and user friendly And then make it visually appealing So go ahead and throw on throw throw all those artsy designs visuals on your designs Problem solved right Well, not really because more and more websites need to be accessible or Even by law it's becoming the standard But a lot of people still have a very black and white stance about Accessible design and especially as accessible websites Accessibility and aesthetics are often seen as conflicting goals You can't have them both so accessibility is more important one and they go with that one and aesthetics really gets neglected Some people say the more accessible an interface is the acclimate becomes and That kind of hurts my feelings But that's why I'm here today to show you that Accessible sites can be beautiful and creative on top of being user friendly There's no need to sacrifice aesthetics To create beautiful websites so Aesthetics and accessibility should go hand-in-hand and not fight together to create a best combination You just have to find the right balance between the two Now if we're talking about the balance, I created a very beautiful scale Which I'm really proud of not Let's try to talk about aesthetics first so let's pull down the scale to down and weigh down the aesthetics What are aesthetics anyway, and why is it important? It's really about the visual attractiveness of a product It's a visual or sensory qualities of a design that are intended to evoke an emotional or psychological response to the viewer You know that feeling you get when you look at a piece of art or an architecture or a website That's that's saying I I really like this or a piece of clothing or whatever that it really fits my feelings That's what we're talking about and in web design. It's more about look and feel So it's about using different colors spacing use of images Typography and different design elements so What makes a website or something beautiful or visually appealing to you guys? Could it be? bright colors or the use of Dark mode lots of white space lots of spacing bold and daring warm and calming There are a lot of different things Not everyone is the same That's really interesting because everyone have it has a different perspective and preferences and that's really influenced by our background our cultural background and our social social backgrounds as well as our personal experiences Because what I find pretty doesn't mean you have to find it pretty as well It's my personal taste that feeling that I was talking about Well, there's also something called generalized aesthetics and to make it a bit a bit more simple You could think of it about in trends as in fashion architecture design So I got some Examples for that in art. It's like Expressionism and this was actually my face when I heard I could give a talk at World Camp Europe on the main stage Oh my god And you got the Renaissance art work Mostly my process when designing something all those phases In architecture you've got like art deco beautiful shapes Ruralism really robust and bold buildings, but also in fashion With like the 70s with a lot of pastel colors and really daring polka dots Anyway, the trends come and go but common elements are often liked and pursued. I like that me too Let's wait a little bit Such a trendsetter But that's also in web design. We got like examples for minimalism with a lot of white space a lot of spacing mostly pure white and a few images Neomorphism not really sure how to pronounce this, but I hope I'm right This is actually not a really good example for accessible design because Is it a button what I'm seeing? Is it what kind of contrasts are here? Is it selected or not? Also brutalism in web design Really daring against the mainstream against the rules also not really accessible, but I like it And who doesn't remember the pretty little bookcase the realistic bookcase from Apple With the scale morphism That was like a trend to make things realistic last example as dark mode Which is actually a good one because it's accessible as well It reduces your eye strains when you're reading something like a long read and It's good for the environment because it uses less energy So you can really get that feeling that there that are different kind of Feelings with aesthetics that people can get But aesthetics are more than just superficial decoration and making things pretty They can serve a critical and crucial function because a well-designed website Can really help establish creativity with your visitors making them more likely to trust your brand differentiate you from your band from differentiate your brand from competitors and create a positive perception and Really communicate your identity But most importantly it really makes the visitor want to interact with the website Explore it and of course, hopefully make a conversion Early impressions matter The visitors from forum initial impressions within seconds. I think if you walk around here at the sponsor booth booths you could See attractive booths and you're really attracted to go to those booths. So this is also something with aesthetics They could really play a key role in shaping your impression If the impression doesn't stick you could lose your visitors and If a website looks on press on professional or outdated Visitors may assume that the business is not trustworthy or that the products or services are of poor quality But instead if a website looks sleek modern and visually appeasing Appealing visitors are more likely to view the business business as professional credible and trustworthy So I've Rattled on and on about aesthetics. I guess you can really see that I like this and I think this is really important but let's go back to the balance and the scale of accessibility versus Aesthetics and we really pull down the accessibility one That was a accessibility is really heavy Accessibility That's really about making sure that everyone including people with disabilities you can use a website or app I think a lot of you people know what accessibility is about This could mean things like easy to read texts good clickable buttons enough contrast between colors Images that should have alternative texts. So screen readers could read them And when I first heard about accessibility, I was quite skeptic about it Because I really thought Doesn't this limit my creativity or and prevented from creating stunning websites that would stand out from the rest and So goodbye creativity make boring websites. Yeah And I wasn't alone. There are a lot of people that still think this way It's a question I get asked a lot actually Even from businesses from how can you create stunning websites, but still follow the accessibility rules and be still creative But it's actually quite opposite because once you start working with it It could actually be really fun and challenging And it doesn't have to block your creativity It can really thrive your designs and it opens up really new possibilities It can expand your creative tool set your brains So you could approach designs in a more innovative and creative way Now you're really forced to think deeply about the user experience To innovative to create innovative and creative user-friendly designs Which would lead to new designs design elements and techniques, which you actually never even considered before a few examples For my architects we used high color contrast colors larger font sizes, which could really improve reliability and it still is bold and modern and gives the architectural vibe Which perfectly matches with my artist artistic views You can really think outside the box it encourages you to think outside the box to find new ways to solve problems For example, you shouldn't really rely on color alone for I hope you could see this For Almere, it's like a website that sells plots We used a agenda with Statuses of those plots if it's sold or if it's available or if it's soon available or if it's Reserved already. So we used colors icons and text to show the status of those plots You should really Optimize your website's navigation making important information easy to find which will improve Usability and functionality And alternative text for images makes your websites want More accessible and it really impuses SEO and I mean who doesn't want that These are just a few examples of what you can do But most importantly, it's just the right thing to do Everyone should have equal access to information and services online and By designing with accessibility in mind. We can really achieve this So now what we talked about aesthetics we talked about accessibility. How do we make a website? That's good-looking and how can we ensure that it's accessible for everyone? Let's go back to the balance We changed the Nails to to a frame We need to make sure to find a good balance between these two and Have them complement each other and not conflict with each other. I like you. I like you too But let's make it simple We could also see accessibility and aesthetics is something different Accessibility could also be the functional elements of your website and aesthetics could also be the decorative elements of your website Now what are functional elements? Elements that are essentials to the functionality of the interface Which must be fully accessible to all users these It's like the core of your website. This just has to work These elements could include colors accessible of course Typography and the right use of headings the heading structure Good clickable buttons Also contrasting buttons and to me it's important to show the hover states as well Perfect input fields for for forms even with labels. That's really important and Easy to use navigations These are just a few examples, which just have to work If a button isn't easy to click or a form isn't easy to fill out Users will get frustrated and may leave your website Which could be a job for a problem solver? This this is really the essence of functional elements So what are decorative elements? These are elements that are purely aesthetic in nature and do not have service specific function within the interface It's important for your identity and recognition But your site can work without it a few examples background images and elements For nature today we used those cute swirls and colorful blobs For a podcast platform listen we use the audio Elements to get the feeling that you really can listen to something and even the word camp Athens website right now uses a lot of those visual elements that I'm talking about Icons could really help For example, these are some tasks that you could use and people could really see how this is a task I could do Also here these just add like a visual cue from you can do something like this but also animations for Amsterdam Sinfonietta, we created a Really snow slow animation on the background And some come content elements that slowly appear when you scroll through the website Which perfectly fits their branding But animations is a difficult one Slow and moving animations can be used as long as they are not the primary way of conveying Important information and do not interfere with the user's ability to navigate the website We can provide users with the ability to turn off those animations Or just adjust the speed or we could use the reduced motion function Don't you know how it's better to create still elements To get the same effect or you could ask a developer for help Decorative elements add really visual interests But are not essential to your website and can be removed or simplified without impacting the user experience We can have more flexibility to make those elements accessible and Experiment with different styles and techniques without worrying about compromising the accessibility these styles may not Meet the WCAG guidelines, but we could still find a way to seamlessly integrate aesthetics with functionality So again aesthetics and functionality should work harmoniously together Instead of clashing with each other Let's put it all together with all the things I've said and quickly build a website from scratch This is Pip Creative photographer. He loves colors, but he's also a little bit mysterious and he asked us to create him a portfolio He gave us some elements like a logo colors images Typography that he loves and we started with a simple navigation easy to find things like Good title a subtitle Maybe a search bar so people could really see his portfolio search for his portfolio items add a few blocks of Portfolio items add some images This actually could be it But we want to make it a little bit more visual appealing. So the text will go over the Images add a background with it to make it accessible I changed the font type You could really see a different kind of vibe already already Now we can add more style elements That he was talking about with the colorful colorfulness, but this is a little bit too bold for Pip So let's tone it a little bit down and change the font because he really didn't like the font anywhere anywhere This almost feels perfect It just doesn't really give that mysterious vibe that he was going for So let's make it dark That's with This really gets the mood going Last but not least we could also add some Animations, I hope this one will start. I hope you guys could see it. It's a little bit dark but there are some elements that are slowly moving and The use of hover animations is gives a really different dynamic and Not that static feeling. I think this video is And this really fits his identity and feeling he was going for. Yeah This was just a super fast example of a website and we could do so much more even with WordPress templates or things So let's conclude Accessibility really is important. It should be the default But we really can't neglect all aesthetics altogether We can go full accessibility mode and copy and paste popular designs or themes that work And it will be way easier from the design perspective Which is okay, of course But it could be a disaster for your business You don't really have an identity or personality to convey that identity to your users To beat your competition, of course You will be just one of those in a million. I think maybe you also Images and websites like this Which is okay, of course again, but is that really what you want? So it's really time to put a Renault nude focus on creating websites that are both both functional and visually stunning By preserving and finding a balance between accessibility and aesthetics. We can really revolutionize Design and create exceptional websites that truly stand out Parkals fire. This takes the wrong and That's really a win-win for everyone And that's kind of my wrap-up. Thank you so much for listening Thanks, Mitchell That was a really great reminder of how in limitation spark creativity rather than like limiting them So I thought it was really wonderful talk. Thank you. Thank you So we've got about 10 minutes for questions if anybody's got a question if you go up to one of the mics And we'll fit in as many as we can That's okay. I have a question. Yeah, sure so I'm interested and Do you still feel that you have to convince businesses of the benefits of accessibility or is that something? You know with level levels reputation. Do they come to you for accessible websites? So do you are you trying to convince them of it? At level ever me. Yeah, we don't really have to convince the businesses anymore because we are known for accessible websites What advice would you have for I said other businesses here who are Trying to make the case to our clients that they should Well, you should really focus on the mindset of the business Of course business is king the business owner is king But you should really teach them that it's really important to make an accessible website as well And it's even good for business because if you are one of the few who have a Accessible website you could get so many more visitors even people with disabilities I think that's one of the tips I could give it. Thanks. Any more questions if we go on here. Yes. Yes You have a lot of ready-made tools that you can install on the website that have accessibility functions So how do you think about that? And is that not the solution for us who don't want to do accessibility? It could be like plugins you mean or plugins. Yeah, there are a lot of accessible plugins You could use them especially if you use WordPress templates, but you could also start with a blank accessible theme and Then add the visual elements Later on if you need those Yeah, but you also have the external services said that you can just plug into a website and then certainly they have some accessibility Then I should Maybe this question should be given to one of my colleagues. I'm not really a developer or a plugin user Is that okay? Yes, sir. Okay. Thank you. Thank you. Any more questions? If there are any questions that you're maybe afraid to ask on the microphone, you could always just Tap me on the shoulder and ask them. Great All right. Thank you so much for your talk. Thank you