• Design in browser is a very simple & effective method:
designing the web using your favorite text editor and
• It’s not a shiny new concept. The ﬁrst websites were
created using text editor and browser.
• Photoshop produces static images.
• Most of the work in photoshop is repetitive and waste of
time. Your homework: create a table with 100 rows and
10 columns in Photoshop.
• Presenting the “images” created in Photoshop might give
the wrong impression about your design.
Design in browser is the right way to build
• Build and ship interactive prototype & production-ready
• Works best for fast-paced product development and
• Requires less people to do a task. Perfect for both small
and big teams.
• Encourages people to give feedback and collaborate. A
tight-knit collaboration can lead to a better product build.
• Perfect for responsive design.
• Easy to manage your design consistently.
• CSS/HTML frameworks: Foundation, Bootstrap, …
• Web inspector.
• CSS processor: SASS, LESS, Stylus, …
• SVG for icons and graphical elements.
• Your design skill must be equal to your coding skill.
• Think about design in browser as an iteration process,
not an end-product.
• “Design in browser” can help you boost your productivity
and product quality.
• Be ﬂexible. Eg: Use Photoshop/Sketch for idea
exploration and experiment in early stage of your design
• Graphic design applications are still usable for creating
websites with heavy graphics.