 Thanks everyone. Okay, I'm going to talk about moving the design process to the browser, but before I start Since Anna did a really great introduction. I'm just going to show the photo of of me finishing my first half-marathon, which was quite awesome A little bit about my my background my my work history I Worked together with my brother a manual as you can see from this picture We look the same so you can know that we are brothers We run a small family agency called Blackmage Brothers And our goal was always to optimize our process and provide extra value to our clients and That's why over the years We were focused on delivering our design as HTML and CSS to templates as opposed to static images and Disproved proved to be one of our great advantages in the future. That's also the reason I'm doing this talk for me it started almost a decade ago with this great book by Jeffery Zellman designing with web standards and This was during those prehistoric times of the internet While there were no rules or guidelines on how to create great websites this was a starting point for most of the designers or a turning point and and Mr. Zellman preached why why the web standards are important and for me personally this made me a better designer I Wanted to excel at building Web standards compliant websites, so I've grown quite fast in writing HTML CSS because it was important for me to deliver those designs that are both Accessible that works great in the browser and not just look good And When we take on a problem we want to solve either on the web or on the mobile We have to find the right tool the right approach to solving that problem Building websites. It's hard and it hasn't gotten easier over the years Most designers spend a lot of time designing websites in Photoshop or sketch or other graphical programs But the results of those websites of those programs are not websites There are only representations of websites static images and This is not a problem by itself But a static image we produce can often set unrealistic expectations for overall experience When presenting set designs to clients, I always try to set expectations in advance so that we can focus on the functionality And not only I candy That's why I spend more time in code and in sketch nowadays For example, you can't easily test interactions on a static mock-up. Yes, there are tools like in vision or prototype by over something like that, but You can't really test how it would work in the browser So you're always have you always have some overhead work that you have to do to test something that won't necessarily work the same way and There is still no easy way to design for different resolutions in graphical programs Responsive web design. It's still the most natural thing to do in the browser directly and Although working with content has gotten easier over the years There are plugins for Photoshop and sketch which lets you generate and input dynamic content and then we test with those It's still sometimes much easier if you want to test for example a really long title to just fire up the inspector Change the heading and see how that breaks the whole flow of the page and one of the main problems of delivering static design Mockups to developers that we can specify everything. We can specify only the visual error and That visual error can often be misleading our website shouldn't be a Work of art that can be put on a shelf and admire done It's it should be a functional thing that actually solves a goal. We pretty find earlier for our users And we were to test for example this HTML prototype If we were to create this website as an HTML prototype a test in the browser We would get completely different results completely different feedback by designing a perfect use case on a desktop and Transforming that on the mobile if if you were to choose like low contrast text or or large background images that don't fit well on the mobile we would get unreadable text and Maybe the most important call to action on our site in this specific case Would become completely invisible and this is not something we want to do So everything is great and we are when we are at home Working working from our Wi-Fi But when we are like on a mobile connection like edge then things start to get bad And if you had like this kind of website that load slowly the overall user experience would pretty degrade Or due to poor choices of fonts or font space or font sizes the text in the browser would not be legible Although fonts and the static mock-ups look great in the browser. It's a completely different thing due to different font rendering technology and browsers and Some basic things like skipping content sections using the keyboard to navigate through the site like you personally do on models and Carousels or something like that can be frustrating if it doesn't work So this is also something that we couldn't test in an image And small target a small touch targets are usually evident only on Smartphones and tablets you can't really design those in Photoshop. You can't really test those in advance and You'd believe that we'd master the hover and focus states by now But still designers don't design for these things They often forget about it because they are designing only for the visual error, which is not often deep enough and One of my favorites is that when I get on this page It uses a bad badly implemented parallax effect the whole browser though my whole high-end computer chokes And this is a really bad experience And these are these are of course only some of the things that I see when I visit a website Someone else might see a completely different thing We should instead modify our approach to making design decisions We should set some Ground rules before we start to design and if we define our expectations Before we start to design then we can tackle these challenges is during the whole process and not at the end and It's important to mention that with the average website Waiting almost two megabytes If you want to really keep it performance in mind as one of your main goals Then you have to think in advance after you added everything. It's too late And if you want to create a page that is simple to use if you want to think about accessibility Then that should be one of your main goals Yes, it's nice to create beautiful animations and interactions But make it functional first and polish after that you will always score points with users if you are creating a functional interface and Designers cannot often get carried away by building animations that they tend to forgot that the whole the whole website is unusable and With thousands of available web fonts to choose from it's hard not to get distracted when setting type So please keep a readers in mind try to choose the font that that feeds the context that feed that feeds the Copy that the client has sent you that you can use And although we came a long way with accessibility We have good tools libraries and resources and Accessibility is also very well received in our WordPress community as well these live captions for example prove it There this is this is still something that we have a long long road ahead designers and developers often say But yeah, but people with disabilities like those users with disabilities are only a small percentage of our whole user base But this is simply wrong So next time you design that custom checkbox or code it in Javascript with two lines of code think about how you are affecting that something that by default works and If you are making the whole thing unusable for someone else who doesn't necessarily use the computer the same way you do and to name only a few There are of course many more goals you can set. These are only some the goals I set when I start to design Good design can be hard, but we can pull it off by making decisions and meeting our users where they are in the browser These are designing in the browser doesn't presume that designers need to know how to write HTML and CSS But it presumes that they should be aware of how certain things work in the browser They should be able to talk to their team members front-end developers back-end developers to work together Browser here is really a synonym for making decisions on actual feedback and usage and not assumptions. I Found that style guides for example help transpose the design process from a single point of view To include multiple perspectives. We talked about earlier not only the visual perspective and that helps deliver a better experience style guides are in a way changing the way we deliver design nowadays and Ten years ago ten years ago. We were used to delivering like different iterations different pages like static psd's or images That that was okay at a time But nowadays it's much easier to just deliver HTML templates because all the interactions all the responsive breakpoints all the different resolutions can be Can be tested in an HTML and Style guides builds upon these ideas by helping us define a set of standards and guidelines We are effectively building a design system that way And one of the great things about style guides is that they are encouraging model or thinking It's under it's in our best interest to keep things simple and to reuse things as much as possible and Model or thinking is responsible for the delivery of the building blocks or Lego bricks they are a part of that design system and where we once delivered only HTML templates we can now deliver small HTML chunks Which can then be used to create different pages different variations and They say that one characteristic of good design is consistency. Well having all components laid out on a single page Can help us in making sure that we don't overdo with fonts or colors and By observing how certain interfaces work and look on their own and as a part of a whole system We can get a broader perspective on consistency and colors and fonts are only An example of that visual consistency. We need to get right Components presented in style guides are by nature self documented For example, let's take up navigation tabs component If you were to see a page where that component is in the whole noise of other components or of different of different things They do have a hard time to see how that component would work alone You would not be sure if you can just paste it in the sidebar or use it somewhere else But when you're looking at that component Stands out in the style guide and you're quite sure how that works You can see what the modifiers are and you can see how you can actually use it somewhere else You know that this is a building brick. You can use to build something and Living style guides also referred to sometimes as front-end style guides combined the power of automation and templating to To display those styles components and code examples basically every pattern we see on the website is a Reproduction an instance or a duplicate or that actual component used on the project and For example, if you change the style of that specific component Even slightly the changes will be visible throughout the site and in our style guide as well You have to remember that if the style guide isn't updated accordingly It will become obsolete over time and then we have no use for style guides But besides automating it's important to be able to pass dynamic data to each module To each component and see how different content shapes are designed. We can't work with Laura Mipson only I Try to define a set of variables for each component and then pass custom custom content values That way I can use that single HTML chunk of code on different places and get different results and testing long titles or different images is not a problem and by combining those two Automation dynamic data we can get reusable code patterns And then generating different variations is simple because we are always using only one HTML So what do we actually deliver to designers and developers and clients? Well a set of rules and guidelines. It's much harder to devate in the future if you have everything laid out To the detail what colors are used where what fonts and things like that, but we're also living those components those building blocks We're delivering a design system Components that follow the rules and guidelines we said before and This is important if you want to have the project that can involve after that and this goes without saying but we are also delivering Examples of different pages and different flows. For example user onboarding process or Webshop checkout or something like that and since we have automation dynamic content already in place in our workflow Then it's that then it's a breeze to generate like dozens of pages with different forms if it's necessary But we are also delivering our best practices our our expectations and our goals about Accessibility and usability and things like that and if you strive to include our best practices in our process then this will also reflect in our delivery and All those style guides can be daunting to start with There are plenty of tools and resources that can help you get started, but it's best to start simple and complicated gradually. I Found that style guides. I always are really great place to start it hosts a different collection of tools articles It even has a podcast and you can see what kind of a style guide generator tool would help you in your process But you can start simple start by creating an interface inventory This is basically in my case as I spread sheet We're trying to document all the different components and pages. I have on the project and I try to list their basic properties like names descriptions I try to define naming patterns for navigation components and what's more importantly I try to take a look of each component from multiple perspectives. So if for example, if I'm working on a Carousel Carousel component, I try to specify what other third-party libraries I'm going to use to make it accessible and I try to write everything down and After that you can define the colors font choices different form form examples default elements And if you're using a CSS preprocessor, which most of us are using nowadays Then your less or sauce or stylus variables is a pretty good place to start You have already defined all the important things that shouldn't be changed and should be only reused on the site and now it's time to display them to others and design discussions are usually usually much more productive when we can focus on the specific component as well Where before the client would comment on the whole page like I don't like this But I can't explain why he can now also comment on the specific component And he can see that typography and colors are only building blocks of that design of that design system and Discussing and improving overall design then starts with the smallest component first And since you've taken a modular approach your you already have the building blocks and you have to include these patterns in your style guide But if you really want to keep your style guides relevant Then they should be based on your code base You have to find a way that suits you best to automate the process of generating and updating those style guides In my case, I'm using a Nile style sheets. This is in short KSS is a CSS documenting methodology Which enables to document important things like description where it falls in the style guide Maybe even define an HTML example I can also include those HTML chunks directly into as a reference in CSS code And this allows me to generate quickly and without much problem examples for different state of buttons or different things And the best part of designing in a browser is that you can use all sorts of tools from testing from your browser Inspector that's already built in or to third-party scripts and services For example, if you wanted to test accessibility, you can use these awesome great little JS library by Khan Academy developers You include it on the site and it highlights all the potential problems accessibility problems You might have in an HTML for example Maybe the color contrast isn't good enough and you can correct that and this is not something that you could do in Photoshop So this is one of the great advantages when you are working with slide code Or if you're not happy with your page pitch score, you think the site could be could be loaded faster Then try to do a few changes try to see if that background video the client insisted to be put put on the website Really helps and benefits the user and you can then use and leverage those results To our clients and stakeholders to actually make the right decisions. It's much easier to talk with numbers and and starting with targets can be hard and Implementing this approach into our own process and existing development process can be challenging But designer job is not always easy But going that extra mile pays off and all the good design can be hard. It makes perfect sense By designing in the browser. I'm able to communicate better with my clients By designing in a browser. I dramatically Reduce the delivery time While also being able to add extra value to the project which the client was really happy afterwards and by designing in a browser Clients can become a part of that design process from the start Thank you