SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Downloaden Sie, um offline zu lesen
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.
• It’s not a shiny new concept. The first websites were
created using text editor and browser.
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.
Design in browser is the right way to build
product.
Design in Browser
• 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.
Tools
• CSS/HTML frameworks: Foundation, Bootstrap, …

• Web inspector.

• CSS processor: SASS, LESS, Stylus, …

• SVG for icons and graphical elements.
Challenges
• Your design skill must be equal to your coding skill.
• Think about design in browser as an iteration process,
not an end-product.
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.

Weitere ähnliche Inhalte

Was ist angesagt?

Wireframing and Prototyping Presentation
Wireframing and Prototyping PresentationWireframing and Prototyping Presentation
Wireframing and Prototyping PresentationMike Carson
 
Starting With a Side Project
Starting With a Side ProjectStarting With a Side Project
Starting With a Side ProjectRachel Andrew
 
Innovate like a boss with no code - No Code Conf 2019
Innovate like a boss with no code - No Code Conf 2019Innovate like a boss with no code - No Code Conf 2019
Innovate like a boss with no code - No Code Conf 2019Webflow
 
The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...
The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...
The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...colleenfry
 
UX Design Process at Atlassian
UX Design Process at AtlassianUX Design Process at Atlassian
UX Design Process at Atlassiankarenmcross
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshopSimon Phillips
 
Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...
Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...
Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...Techsylvania
 
Final 5 Steps to Measure Success in Web Design
Final 5 Steps to Measure Success in Web DesignFinal 5 Steps to Measure Success in Web Design
Final 5 Steps to Measure Success in Web DesignCore Elevation
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...John Murray
 
World's Top 10 Technology Startups
World's Top 10 Technology StartupsWorld's Top 10 Technology Startups
World's Top 10 Technology Startups101presentations
 
Just Push the Button
Just Push the ButtonJust Push the Button
Just Push the Buttonfinndigital
 
Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...
Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...
Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...Simon Phillips
 
Getting sh*t done: How design is changing the way Coolblue works - Jeffrey
Getting sh*t done: How design is changing the way Coolblue works - JeffreyGetting sh*t done: How design is changing the way Coolblue works - Jeffrey
Getting sh*t done: How design is changing the way Coolblue works - JeffreyCoolblue
 
Audits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website RedesignAudits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website RedesignChristina Olivas
 
Remote Working/Learning
Remote Working/LearningRemote Working/Learning
Remote Working/LearningRiza Fahmi
 
ProductCamp 2013 Site Redesign
ProductCamp 2013 Site RedesignProductCamp 2013 Site Redesign
ProductCamp 2013 Site RedesignMax Chung
 

Was ist angesagt? (20)

Wireframing and Prototyping Presentation
Wireframing and Prototyping PresentationWireframing and Prototyping Presentation
Wireframing and Prototyping Presentation
 
Starting With a Side Project
Starting With a Side ProjectStarting With a Side Project
Starting With a Side Project
 
Clikzy Design Process
Clikzy Design ProcessClikzy Design Process
Clikzy Design Process
 
Innovate like a boss with no code - No Code Conf 2019
Innovate like a boss with no code - No Code Conf 2019Innovate like a boss with no code - No Code Conf 2019
Innovate like a boss with no code - No Code Conf 2019
 
The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...
The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...
The Experience Canvas: How to Use a Core Tool from the Experience-Driven Play...
 
UX Design Process at Atlassian
UX Design Process at AtlassianUX Design Process at Atlassian
UX Design Process at Atlassian
 
Prototyping for web and mobile workshop
Prototyping for web and mobile workshopPrototyping for web and mobile workshop
Prototyping for web and mobile workshop
 
Stay focused
Stay focusedStay focused
Stay focused
 
Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...
Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...
Aryk Grosz, Co-Founder & CTO ,Mixbook - Only the Odd Survive - Scaling Techno...
 
Final 5 Steps to Measure Success in Web Design
Final 5 Steps to Measure Success in Web DesignFinal 5 Steps to Measure Success in Web Design
Final 5 Steps to Measure Success in Web Design
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...
 
World's Top 10 Technology Startups
World's Top 10 Technology StartupsWorld's Top 10 Technology Startups
World's Top 10 Technology Startups
 
Just Push the Button
Just Push the ButtonJust Push the Button
Just Push the Button
 
Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...
Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...
Maintaining Continuous Learning Under Pressure Slides from Lean Agile Scotlan...
 
How to start_up
How to start_upHow to start_up
How to start_up
 
Getting sh*t done: How design is changing the way Coolblue works - Jeffrey
Getting sh*t done: How design is changing the way Coolblue works - JeffreyGetting sh*t done: How design is changing the way Coolblue works - Jeffrey
Getting sh*t done: How design is changing the way Coolblue works - Jeffrey
 
Audits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website RedesignAudits and Inventories: How To Mise en Place Your University's Website Redesign
Audits and Inventories: How To Mise en Place Your University's Website Redesign
 
Marketing Automation Summit 2015
Marketing Automation Summit 2015Marketing Automation Summit 2015
Marketing Automation Summit 2015
 
Remote Working/Learning
Remote Working/LearningRemote Working/Learning
Remote Working/Learning
 
ProductCamp 2013 Site Redesign
ProductCamp 2013 Site RedesignProductCamp 2013 Site Redesign
ProductCamp 2013 Site Redesign
 

Ähnlich wie Design in Browser

Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectationsFrancesco Improta
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Your Browser Is The New Photoshop
Your Browser Is The New PhotoshopYour Browser Is The New Photoshop
Your Browser Is The New PhotoshopMatt Puchlerz
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Thinkful
 
Introduction to Web Page Design OT and Network
Introduction to Web Page Design OT and NetworkIntroduction to Web Page Design OT and Network
Introduction to Web Page Design OT and NetworkNosajTriumps
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's WebMeagan Fisher
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webJoe Arcuri
 
Tools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteTools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteEric Lewis
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great websiteDr. Taher Ghazal
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap Creative
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowMichael Kowalski
 
Full stack conference talk slides
Full stack conference talk slidesFull stack conference talk slides
Full stack conference talk slidesSameer Al-Sakran
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designingsreejagiri
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspectiveeginni
 

Ähnlich wie Design in Browser (20)

Atomic design, a problem of expectations
Atomic design, a problem of expectationsAtomic design, a problem of expectations
Atomic design, a problem of expectations
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Your Browser Is The New Photoshop
Your Browser Is The New PhotoshopYour Browser Is The New Photoshop
Your Browser Is The New Photoshop
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Design for developers (april 25, 2017)
Design for developers (april 25, 2017)Design for developers (april 25, 2017)
Design for developers (april 25, 2017)
 
Introduction to Web Page Design OT and Network
Introduction to Web Page Design OT and NetworkIntroduction to Web Page Design OT and Network
Introduction to Web Page Design OT and Network
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
 
Tools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteTools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web Site
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great website
 
Bootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book SampleBootstrap 4 Online Training Course Book Sample
Bootstrap 4 Online Training Course Book Sample
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Full stack conference talk slides
Full stack conference talk slidesFull stack conference talk slides
Full stack conference talk slides
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
Presentation of web designing
Presentation of web designingPresentation of web designing
Presentation of web designing
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspective
 

Kürzlich hochgeladen

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Kürzlich hochgeladen (19)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

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.