Marc Friederich

UX Designer / Web developer

Antistatique is a swiss web agency providing handcrafted solutions

github.com/antistatique

@antistatique

Prototyping in the browser

Prototyping in the browser

Definition

« A first or preliminary version of a device or vehicle from which other forms are developed. »

Advantages

• Communication tool
• Easily testable
• Discovery phase
• Making mistake
• Stakeholders engagement

Build your prototype

Test and iterate

Don't focus on detail

Prototyping in the browser

Your browser is a fantastic tool

• Interactive
• Multi-device
• Easy to test
• Free
• Standard

HTML/CSS/JS

• Full text
• Modular and reusable
• Collaborative
• Versionable
• Easy to learn

A project is a discussion

Prototype helps framing the discussion

Express your ideas with a pencil

Be messy

When you feel your sketchs are fading

Go to your browser

Weapons of choice

Framework / Environnement / Editor

Weapons of choice

Framework / Environnement / Editor

Weapons of choice

Framework / Environnement / Editor

table>tr*10>td*4>a[href=http://example.com].btn

Case study

EHL

Social Network application

• Design studio
• Wireframe HTML
• User test
• Refine
• Drupal integration

EESP

Student intranet

• Mobile wireframe HTML
• User test
• Refine

Conclusion

• Prototypes are communication tools
• Test and improve as often as possible
• Improve your process