How do I design in a browser?

This is also a problem that often bothers me, how to choose between browsers and Photoshop, and how to design efficiently in a browser?

Hope everybody likes, can give everybody to provide some help ~ ~

If you're a tech designer, you've probably heard or seen a hot topic in the current design field: Design in a browser. As it literally says, instead of spending hours, days, weeks, or months in Photoshop designing a piece of work that's accurate to every pixel (top-down design process: A visual manuscript designed by a designer and implemented by a background programmer), Direct design in the browser allows the designer to take a simple rough sketch directly into the process of writing code and implementation.

But how can you design efficiently in a browser?

When is the best time to adopt this method?

This article will tell you when you should use your browser instead of the traditional Photoshop design, and how you can efficiently design in your browser.

I think the concept of "design in the browser" is more of a browser to get the results you want rather than a simple design. In my opinion, the purpose of the design is to solve the problem for the user, and in the browser design allows you to achieve the fastest possible design effect of the code-only a few discussions and a few sketches.

When to choose?

There are a lot of articles in the tech forum that chant the advantages of designing in a browser-saying it's the future of web design, or that Photoshop should be eliminated and whatnot. I admit that using a browser design can be your first choice when designing a project, but in some cases you may not be able to do so-for example, a customer has special requirements, or the final delivery of the product is not appropriate, or there is a time limit, etc.

Here's a list of possible scenarios you should not choose to design with your browser:

The needs of the customer are not suitable for implementation in the browser. You can say "then don't cooperate with them", but we all know that the reality is not always up to you to decide. Perhaps the immediate customer's primary need is to stand out as a competitor by presenting a well-designed website or to win the favor of investors; perhaps the customer's demand for functionality has been changing; perhaps there are many fundamental problems with the customer's existing version. In these cases, the traditional way to make a diagram and then generate a design effect chart may be more effective in presenting the prototypes they need.

Many customers view visual effects as results. Sometimes it's much more effective to give customers 10-20 high fidelity images a week than 1-5 of them can run but are mundane.

The function and layout of the Web site is too complex to be realized simultaneously both at the visual and the code level. As humans, most of our brains cannot support our thinking in two dimensions at the same time. While it may be said that design is inseparable from code, it is difficult for me to imagine a complex layout with many changes and write code for the layout. Research has shown that humans are not good at multi-line work, as is the case with a browser design. Indeed, long hours of exercise will allow you to quickly visualize complex compositions in your mind and write cleaner code, so please don't give up.

Sometimes it is. Like, Nani?!

The work is in the "improvement" stage. The project has gone through the initial MVP phase, and now in front of you is a well-designed finished website, all you have to do is add more functionality to it. If the user has expressed dissatisfaction with a particular design in the browser, such as the action button is not clear enough, or they do not know where to start reading from the page. At this point you should go back to Photoshop and review the design carefully.

In my opinion, the biggest challenge in designing a browser is what Andy Budd says:

"The best design tool minimizes the boundaries between the designer and the design work (a pencil is a good example) and uses a browser design to add an unnecessary barrier to the process." "--andy Budd

In addition, you do enjoy the process of carefully drawing each pixel on the artboard. Many web designers are formerly graphic designers. The Spirit of excellence in detail has long been incorporated in our bones.

We choose to use browser design for a variety of reasons, depending on the project we will adopt a different approach. When you need to design with a browser, here's how I use it.

How to get started?

There are a number of ways to start a design project. For example, when I was writing this article, I used the method that philosophie often used to design products for a new company. Many of the leading designers in the field of design, such as Dan Mall, have elaborated on how to start a project successfully, and I will not repeat it here.

In the process of launching the project, if we have made clear the user group, the user's opinion on the product, the product itself positioning as well as the initial goal to achieve and even basic wireframes and function list, then we have a preliminary understanding of the product user base and the concept of the customer.

I like to use the emotional board to start my design. Emotional board can help me save time and effort to draw a brand image. I usually go to Pinterest, dribble looking for the visual material that suits the customer.

Here I pick out a framework that allows me to quickly layout and copy to the UI. If it's a marketing or consumer-oriented site, I tend to use foundation because all the options in Foundation are directly in the code. In my opinion, foundation is more basic and more easily covered than bootstrap. Bootstrap is a mature framework and an ideal choice for managers to use for their users. It's easy to use bootstrap, but it's very painful when you need to overwrite the original CSS.

Next is the design guide. Preparing a (or a series of) design guidelines at the beginning of a design is important for unifying and simplifying all design elements. As the predecessors have elaborated the importance of the design guide in detail, I will not repeat it. But what I'm trying to say is that a design guide makes it very easy to make a big change in the design process in the future, which is one of the reasons we should have used the browser design in the beginning. I'm used to manually creating design guidelines for UI elements as needed, but you can also use the KSS method or even hologram software to help you generate design guidelines automatically.

Finally, let's talk about composition. I always remind myself not to forget those design principles, such as eye movement, hierarchy and contrast. In the process of design, these are easy to be forgotten. When all my design is done by Photoshop, I can consider more design concepts and details of the design, and I will test different action buttons, layout layouts, or compelling animation effects. From this perspective, the use of browser design has fundamentally hampered our ability to look beyond our inherent thinking to design. The easiest way for me is to stack up from the lowest level: put plain text, wrap the HTML language, then put the layout in the frame, add the design style tag and define them in the CSS.

Using browser Tools

Now that you've created the prototype of your first generation site in your browser, it's time to check it out with your customers. Then comes the moment when miracles happen: you will address most of the design feedback in a single meeting without having to make countless repeated changes.

Here's how I've done this through the Chrome Review element feature:

1. Customers want to change the text. Open the Review element Click "Edit Text" and will change the effect after the screenshot.

2. We want to add a new column to some part of the page. Open the Review element click "Edit HTML", copy and paste into a new column, the same will change the effect after the screenshot.

3. We want to increase the size of the radio button in the table. Right-click the button after clicking the magnifying glass. A magnifying glass can show child element attributes in a parent element. Change the style code and screenshot.

4. We want to change the color, size, or any style, right click on the review element, and start editing. Remember screenshots, screenshots, and screenshots.

I'm more inclined to take screenshots than to save my own code with a chrome-enabled tool. This is because using a review element does not get the most clean and beautiful code. The review element is just a tricky way to test design decisions and show them to customers. But screenshots allow you to keep track of all the changes you've made and give you references when you need to edit the code later.

Team collaboration

Disclaimer: Philosophie selects pivotal tracker as its project management tool, Ruby on rails for stack operations.

Compared to the traditional Top-down design process I mentioned earlier, using a browser design allows you to work with your small partners at the same time. The first draft may be flooded with basic templates or bootstrap styles, which are far from the MVP design criteria. On top of this draft, we can slow down and make improvements such as branding, fonts, content-level relationships, and so on. You can even go to the "improvement" phase mentioned above and use Photoshop for subtle modifications.

How did we put the design process into the pivotaltracker? I found that dividing user requirements into front-end and back-end tasks is the most effective way to manage. This allows you to run the design ahead of the development, or allow engineers to develop models and controllers and then design the designs for the designers, alternately.

For example: The current end of the designer in the design of static pages such as the home page, Contact table, content page, backstage programmers can generate login system input box and view. The front-end designer can then intervene in the design of the style.

How does it work in the actual project?

We chose to use the browser design method to deal with our most recent project, because we think it can help us to get a clean and refreshing design while keeping the cost within budget. I used the bootstrap template and the sublime text code Editor to quickly sketch out the layout of the page and make some simple improvements in important places. In addition, as I described earlier, I work with the backend developers to work with some front-end problems while they are working backstage.

In the middle of the project, customers want to explore the new front page design direction. In order not to limit my design, I decided to use Photoshop to show some beautifully synthesized first-page iterations. This is not as painful as having to modify a single page over and over again.

With the new styles synthesized in Photoshop and the UI elements I've designed, I just need to change the style in one place and the whole site will be the same as the new home page.

Summary

There is no good or bad way to design a Web page. Even if you often use a browser design does not mean you should give up Photoshop.

For me, the most valuable part of using a browser design is that it reduces the pain of traditional design processes and allows you to work effectively with your team without sacrificing your own design principles.