Slide of my talk about Design in browser

1. Min Tran
Founder, Lead Designer at Frexy and IconEden.

2. What is “design in browser”?

3. • Design in browser is a very simple & effective method:
designing the web using your favorite text editor and
browser.
• It’s not a shiny new concept. The first websites were
created using text editor and browser.

4. Photoshop sucks
• 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.

5. Design in browser is the right way to build
product.

7. • Build and ship interactive prototype & production-ready
code quickly.
• Works best for fast-paced product development and
agile environment.
• 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.

8. Tools
• CSS/HTML frameworks: Foundation, Bootstrap, …
• Web inspector.
• CSS processor: SASS, LESS, Stylus, …
• SVG for icons and graphical elements.

9. Challenges
• Your design skill must be equal to your coding skill.
• Think about design in browser as an iteration process,
not an end-product.

10. Conclusion
• “Design in browser” can help you boost your productivity
and product quality.
• Be flexible. Eg: Use Photoshop/Sketch for idea
exploration and experiment in early stage of your design
process.
• Graphic design applications are still usable for creating
websites with heavy graphics.