Thanks everyone
Ok, I'm going to talk about moving the design process to the browser
But before I start, since Ana did a really great introduction
I'm just going to show the photo of me finishing my first half marathon
Which was quite awesome
A little bit about my background, my work history
I work together with my brother Emanuel
As you can see from this picture we look the same so you know we are brothers.
We run a small family agency called Blagonic Brothers
and our goal was always to optimize our process and provide extra value to our clients
that's why over the years we were focused on delivering our designs as HTML and CSS templates
as opposed to static images
and this 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 Jeffrey Zeldman 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 our starting point for most of the designers or turning point.
Mr. Zeldman preached why 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 and writing HTML and 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 you're taking a problem we want to solve it around the web or on your
mobile
we have to find the right tool the right approach to solving that problem
building websites is hard and it hasn't gotten easier over the years most
designers spent a lot of time designing websites in Photoshop or Sketch or other
graphical programs but the results of those website of those the programs are
not websites they're only representations of websites a static
images and this is not a problem by itself but a static image reproduce can
often set unrealistic expectations for overall experience
when presenting static designs to clients
I always try to set expectations in advance so that we can focus on the
functionality and not only eye candy
that's why I spend more time in code than in Sketch nowadays
for example you can easily test interactions on a static mock-up
yes there are tools like InVision or proto.io or something like that but
you can't really test how it would work in the browser
so you always have some overhead work that you have to do
to test something that won't necessarily work in 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 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't specify everything we can specify only
the visual layer and that visual layer can often be misleading our website should
be a work of art that can be put on the shelf and admired
it should be a functional thing that actually solves a goal we pre–defined
earlier for users and if we were to test for example this HTML prototype
if we were to create this website as an HTML prototype to test it in browser we would
get two 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 tax or or large background
images they don't fit well and 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 when we are at home
I working from our Wi-Fi but when we are 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 with you could pretty degrade or due to poor choices of fonts
font weights or font sizes the text in the browser would not be legible
all the fonts and the static markups look great in the browser it's a
completely different thing to do to a different font rendering technology and
browsers and some basic things like skipping content sections using the
keyboard to navigate to to the site
like I personally do on modals and carousels and 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
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've mastered 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 layer which is not often deep
enough and one of my favorites is that when i get on this page that uses up a
badly implemented parallax effect the whole browser
on my whole hand 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 the
website
someone else might see a completely different thing we should instead modify
our approach to making design decisions we should set some fixed ground rules
before we start to design and if we define our expectations before we start
to design then we can tackle these challenges during the whole process and
not at the end and it's important to mention that with the average website
weighting almost two megabytes
if you want to really keep 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 it 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 the 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 your readers in mind try to choose the font that that fits the
context that fit that fits that 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 very well received in our WordPress community as well this live captions for
example prove it, this is still something that we have a 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 you coded in java script with
two lines of code
think about how you're 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 of 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
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 an actual feedback and usage
and that 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 helped deliver a better experience
style guides are in a way of changing the way we deliver design nowadays
and 10 years ago we were used to delivering like different iterations
different pages like static PSD's or images that what that was okay at a time
but now 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 for 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 modular thinking
it's in our best interest to keep things simple and to reuse things as much as
possible and modular 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 our 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 over do 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 hole noise of other components or different things
then you'd 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 and style guides
combine the power of automation and templating to to display those styles
components in code examples
basically every pattern we see on the website is a reproduction an instance or
duplicate or the actual components used in 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 get 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 our design we can't work with
lorem ipsum 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 we actually deliver two designers and developers and clients
well a set of rules and guidelines it's much harder to deviate 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 during those components those
building blocks
we're delivering a design system components that follow the rules and
guidelines we set before and this is important if you want to have the
project that can involve after that and this goes without saying but we we are
also delivering examples of different pages and different flows for example our user
onboarding process or web shop check out or something like that
and since we have automation and dynamic content already in place in our workflow
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 expectations and our goals about accessibility and usability and things
like that and if we strive to include our best practices in our process and
this will also reflect in our delivery and although 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 start simple and complicate gradually I found that styleguides.io
is a really great place to start
it holds a different collection of tools articles
it even has a podcast and you can see what kind of style guide generator tools
would help you in your process but you can start simple
start by creating an interface inventory this is basically in my case
a spreadsheet
where I'm trying to document all the different components and pages I have
on a 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
important i try to take a look of each component from multiple perspectives
so if for example if i'm working on a
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 examples default
elements and if you're using this is preprocessor which most of us are using
nowadays
then your LESS or SASS 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 used on the side and now it's time to display them
to others and design discussions are usually usually much more productive
when we can focus on a 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 a specific component and he
can see that typography and colors are only building blocks of that design of
that design system and discussing an improving overall design then starts
with the smallest component first
and since you've taken a modular approach 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 codebase 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 Knyle Style Sheets, in short KSS, is a CSS documenting
methodology which enables documenting important things like description where
it falls in the style guide
maybe we 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 the browser is the thing you can use all
sorts of tools from testing from your browser inspector that is already built in
or to third-party scripts and services for example if you want to test
accessibility
you can use this 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 we could do in Photoshop
so this is one of the great advantages when you are working with live code or
if you are not happy with your page Page Speed 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 on the website
really helps and benefits the user and you can then use and leverage those
results to your clients and stakeholders to actually make the right decisions
it's much easier to talk with numbers and starting with style guides can be hard
and implementing this approach into our own process and existing development
process can be challenging but designer's 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 the 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