Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Min Tran
Founder, Lead Designer at Frexy and IconEden.
What is “design in browser”?
• Design in browser is a very simple & effective method:
designing the web using your favorite text editor and
browser.
• ...
Photoshop sucks
• Photoshop produces static images.

• Most of the work in photoshop is repetitive and waste of
time. Your...
Design in browser is the right way to build
product.
• Build and ship interactive prototype & production-ready
code quickly.
• Works best for fast-paced product development an...
Tools
• CSS/HTML frameworks: Foundation, Bootstrap, …

• Web inspector.

• CSS processor: SASS, LESS, Stylus, …

• SVG for...
Challenges
• Your design skill must be equal to your coding skill.
• Think about design in browser as an iteration process...
Conclusion
• “Design in browser” can help you boost your productivity
and product quality.
• Be flexible. Eg: Use Photoshop...
Design in Browser
Upcoming SlideShare
Loading in …5
×

Design in Browser

954 views

Published on

Slide of my talk about Design in browser

Published in: Design

Design in Browser

  1. 1. Min Tran Founder, Lead Designer at Frexy and IconEden.
  2. 2. What is “design in browser”?
  3. 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. 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. 5. Design in browser is the right way to build product.
  6. 6. • 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.
  7. 7. Tools • CSS/HTML frameworks: Foundation, Bootstrap, … • Web inspector. • CSS processor: SASS, LESS, Stylus, … • SVG for icons and graphical elements.
  8. 8. Challenges • Your design skill must be equal to your coding skill. • Think about design in browser as an iteration process, not an end-product.
  9. 9. 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.

×