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 article, 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.
Jimmy's Internet Marketing Business Blog 