Recently, the creative team here at Speak made the transition to designing in-browser. That means we are, for the most part, abandoning desktop design tools like Photoshop, Illustrator and Sketch. We've thrown off the shackles of flat concepts and moved to interactive prototyping.
While I can't say the transition has been entirely painless, I can definitely say it's been rewarding as well as liberating.
Here is an overview of my journey with designing in-browser.
Benefits of Designing In-Browser
- Interactive Prototyping
- Early Testing
- Less Repetitive
- Improved Coding Skills
Challenges with Designing In-Browser
- Learning Curve
- Increased Complexity
Benefits to In-Browser Design
In-Browser Prototypes are Interactive
For years I've been showing clients flat designs. They were usually pdf presentations or jpgs. More often than not, I'd show a desktop version of their homepage, and one or two other pages. There was nothing to click, and nothing for the user to "do." All that changes when you design in-browser.
That sticky header? Here's how it looks as you scroll. Mobile navigation? Here's how your users will approach it. These buttons? Watch them change colors as I hover the mouse. With in-browser design, the client can see features for themselves; they can use the concept.
Reactions are more meaningful, usability can be tested, and styles can be updated on the fly.
We still love our wireframes here at Speak, but the bulk of the heavy-lifting will be done in a text editor, not a desktop-based design app.
Designing In-Browser Allows for Early Testing
I've actually found that the client is more imaginative and allows me more freedom when they're presented with a working copy of a web concept. While it may take more time to develop a website concept in-browser than it would to generate a mockup in Photoshop, the payoff is huge and the feedback is more significant.
We can judge interactions and adjust the concept accordingly, not by retreating back to the 2D realm, but by making alterations and improvements to the UI in a more practical manner.
In-Browser Designs are Responsive
If saving time is your concern, then designing in-browser might be for you, when it comes to responsiveness. Want to show what something looks like on tablet and mobile? When you’ve designed in the browser, you can.
When I'm designing a new concept, I try to establish key responsive breakpoints for each element. Even though these are likely to change later in the project, having some basic guideline breakpoints established will allow you to show a client the difference between their desktop, tablet and mobile experience in a live environment.
No More Replicating a Flat Design In-Browser
If you’re anything like me, you've had trouble replicating a 2D design in browser. Whether it's your own design or someone else's, it's a challenge to get a pixel-perfect representation of a flat design to exist in the real world.
In your web browser, things move. Users have a variety of browsers to choose from, each one rendering your site in a slightly different (and slightly bothersome) way. "Why doesn't it look like the design?" or "This is 5px to the left in the original design" are statements I've heard more than once when moving from a flat concept to a responsive website.
We should all strive for perfection in our builds, but I will just come out and say it: It's not easy to make a website look 100% identical to a jpg. Designing in the browser is a great way to alleviate any confusion and frustration on your end or the client’s as you take a site from concept to development.
Designing In-Browser Improves Your Coding Skills (Seriously)
The more you design, the more you develop. The more you develop, the stronger you get with coding. Sure, there will be stumbling blocks along the way, but don't let that stop you. I've found that my development skills have grown a lot since I've started designing in-browser, simply because I tend to experiment more than I ever did in Photoshop, and it's in that experimentation that my coding skills have grown stronger.
Content Drives Design In the Browser
One more reason to start designing in-browser is that it allows you to focus on content first. I'm not spending hours making arbitrary decisions on things like colors and button styles. I'm letting the content dictate my design.
How do I want someone to interact with this? What should they read first, second, third? Shaping your design around your content, and wrapping that in a good, clean code markup is always going to lead to a better end product.
In his article "The Web is 95% Typography," Oliver Reichenstein explains that we as web designers should focus on shaping written information. How we interact with and respond to content is more important than how that the rest of the site looks and feels.
Focus on your content first, and let any styling come later in the project. This will allow what's most important to shine, and it lets you use style to dictate importance and meaning in content.
Challenges When Designing in the Browser
Designing In-Browser Feels Slower at First
Just like the first time you fired up Photoshop, you may find this new approach somewhat cumbersome. I know I did. It's a fact that you can draw up a layout quicker in Photoshop than you can actually code it, and this is especially true of the beginners.
However, given the time and focus needed to learn any new skill, you will find that you get faster the more you practice. Keep in mind that even though it may feel slower, you are technically doing two separate stages of the web design process at once. That said, you will in fact be saving time by not having to design something and then figure out how to recreate it in-browser.
Web Design In the Browser is a Complex Approach
I never said it would be easy to design in-browser. Sometimes it's hard to know where to start, and other times it's hard to know what element of your site just doesn't feel right. You may have an idea but no idea how to pull it off. However, the same could be said of designing a flat concept in Photoshop.
Take the time necessary to learn new tools and frameworks, and stay committed to experimenting with the UI, and you will find designing in-browser gets easier over time. This new process is going to feel a little backwards at first, but it's more rewarding than you think.
Being able to design and develop well are both great skills to have, but doing so at the same time is a skill in itself, and one that may very well be expected of the modern web designer in the near future.
Making the Switch to Designing In-Browser
There's no “one way" to design a website. Designing in-browser may not be for everyone and has certainly been a challenge for me. That said, it has helped me focus on what really matters.
We all know the importance of color and imagery on the web, but in the end, it’s the feel and function of a website that's really the foundation. So why not begin a web design by first determining how it functions, and then selecting how it looks?
Welcome to designing in the browser.
What do you think about our switch to designing in browser? We'd love to hear from you in the comment section, or contact us learn more about what our web design team can do for you.