Design in Browser
4 likes1,123 views
Design in browser refers to designing websites using only a text editor and browser rather than design tools like Photoshop. It allows for quickly building interactive prototypes and production-ready code in an agile development environment. Some benefits include faster shipping, lower costs, easier collaboration, and natural support for responsive design. Challenges include needing equal design and coding skills and treating the process as iterative rather than finished. Overall, design in browser can boost productivity and quality for many projects.
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.