Wireframes

“ First, solve the problem.

  Then, write the code. ” 

- John Johnson

 

Wireframe

visual guide that represents the skeletal framework of a website


Layout/
Elements

Design

​Interaction
Wireframe
Mockup
Prototype
Product

Why?

Saves programming time

Makes collaboration easier

Keeps you sane and friendly

How?

myBalsamiq

Free to use for us through Open Source license

How much design?

No colors

No images

No fonts

Layout

Padding/margins

Relative sizes (h1 etc)

But it's sketchy.

Yes, it's supposed to focus on structure.

How about interactions? 

It doesn't affect back end work, right?

Well perhaps

Questions

deck

By Caner Uguz

Loading comments...

More from Caner Uguz