Don't be a stereotype: Rapid Prototype

33
Ed Charbeneau
  • date post

    21-Oct-2014
  • Category

    Technology

  • view

    19.074
  • download

    1

description

In just about every industry, rapid prototyping is described as “A group of techniques used to quickly produce a working model”, and web development should be no different. Rapid prototyping allows developers to quickly communicate and collaborate on the product they are creating while investing minimal resources. When used effectively, a prototype can provide structure to a project, ensuring that the development team and the customer are working towards the same vision and goal.

Transcript of Don't be a stereotype: Rapid Prototype

Page 1: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Page 2: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Ed Charbeneau

• Sr. Web Developer for Sypris Solutions

• Code PaLOUsa Co-Chairman• Author: Simple-Talk• ResponsiveMVC.net• Twitter: @EdCharbeneau

Page 3: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Rapid Prototyping

A group of techniques used to quickly produce a working

model

http://imgs.xkcd.com/comics/the_general_problem.png

Page 4: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Stereotype

a widely held but fixed and oversimplified image or idea of a particular type of person

or thing.

Page 5: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

It’s all about communication

Without a working model, we can’t communicate our goals and we can’t anticipate how users will interact with the product.

Page 6: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

It’s all about communication

Page 7: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

It’s all about communication

Page 8: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Who are we communicating with?

We need to be able to communicate on common ground

with our:Designers

DevelopersCustomers

Testers

Page 9: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Web Developer / Designer

This is not me and I am both a Web Designer and Developer

Source: http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/

Page 10: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Don’t be a stereotype

Nobody aspires to fit a stereotype, so stop doing it with your tool set

Think outside your toolbox

Page 11: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

You MUST use these, right?

Well, not exactly.

OR

Page 12: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Build your own prototyping toolbox

Here are some things I like to develop with

Let’s talk about why!

Page 13: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Tools

Editor

HTML, JS & CSS Editor

IntellisenseExtendablevNext, even

better

Packages

Great resourceOpen Source

Easily manageable

Fast installation

Platforms

Full control of HTML

Promotes reusabilityTemplates

Open source

Page 14: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Visual Studio

IDE

HTML, JS & CSS Editor

IntellisenseExtendablevNext, even

better

NuGet

Great resourceOpen Source

Easily manageable

Fast installation

ASP.Net MVC

Full control of HTML

Promotes reusability

RazorOpen source

Page 15: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

“Traditional” wireframe tools

• Wireframes• Photoshop• Mockup software

– Basalmic– SketchFlow– PowerPoint

Page 16: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Responsive Design

tablet desktopmobile

Page 17: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Static wireframe pitfalls

Responsive designHow will this look a phone

How will this look on my tabletWhat if I rotate the displayWhat will be displayed if I

“snap” the window in Windows 8?

Page 18: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

I write it, and we’ll do it LIVE

It’s time to start wire framing in code and using the browser

***

Page 19: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Correct Context

Viewing a prototype in a native environment gives you a better perspective.

Source: http://www.zurb.com/article/898/wireframes-are-dead-long-live-wireframes

Page 20: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Foundation

Rapid prototyping and responsive

design framework

Page 21: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Bootstrap

Page 22: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Git

Easy to use source controlUbiquitous• All platforms• Tooling support

GitHub• Large open source community

Page 23: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Chrome developer tools

Edit code directly from the browser

#titanic{

float:none;}/* Too soon? */

Page 24: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

How it works

<!-- begin demos --><demos>

Page 25: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Prototyping for MVC

@* Html helpers example *@@* Lorem Ipsum on the fly *@

@Html.Ipsum() @* a random length paragraph *@

@Html.Ipsum().h1() @* an h1 tag filled with ipsum*@

@Html.Ipsum().h1().p().ul() @* Fluent Ipsum*@

www.responsivemvc.net

Page 26: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

InlineIpsum for jQuery

/* Html helpers example *//* Lorem Ipsum on the fly */

@Html.Ipsum.p() /* a random length paragraph */

@Html.Ipsum.h1() /* an h1 tag filled with ipsum*/

@Html.Ipsum.h1().p().ul() /* Fluent Ipsum*/

Github.com/edcharbeneau/InlineIpsum

Page 27: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Bootstrap demo

<!– css example --><!– a row with two six column wide blocks of content -->

<div class=“row”><div class=“col-md-6”></div><div class=“col-md-6”></div>

</div>

Page 28: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Foundation demo

<!– css example --><!– a row with two six column wide blocks of content -->

<div class=“row”><div class=“large-6

columns”></div><div class=“large-6

columns”></div></div>

Page 29: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Iteration and AB testing

Create different versions of the same project$ git branch TestA$ git checkout TestA… some changes$ git commit

$ git branch TestB$ git checkout TestB… some changes$ git commit

Page 30: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Testing

Branch and merge

Master Merged

Left Navigation

Right Navigation

Deleted

New Master:Using left navigation

Decision:Should we use left orright navigation

Branch

Branch

Page 31: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Questions?

<!-- end demos --></demos>

Page 32: Don't be a stereotype: Rapid Prototype

Ed Charbeneau

Prototyping