MY W

EBSITE D

ESIGNIN

G

PROCESS

BY

JA

VK

HL A

N R

EN

TS

EN

DO

RJ

THE LADDER

Step 1: Creative / Inspirational time

Step2: Sketching / Wire framing Ideas

Step3: Writing The Requirements

Step4: Designing

Step5: Implementing

CREATIV

E TIM

E

CREATIVE TIME / !!! MOST IMPORTANT !!! /

Several Ways

• Photo

• Website Galleries

• Music : P

DON’T REINVENT THE WHEEL

CREATIVE TIME

CSS Galleries• WwW.CreatTica.Com• WwW.CssMania.Com• WwW.CssDrive.Com

CREATIVE TIME

• Choosing the RIGHT

color set

• Corresponding forms in

layout

• Better thinking about

the product

WwW.ColourLovers.com

HARVARD STYLE COLOR SET

SKETCHIN

G &

WIR

EFRAMIN

G

SKETCHING / WIREFRAMING

• Rapid concept development

• Basic composition / layout

• Client communication and approval

• Visual exploration

• Refining visual solutions

SKETCHING / WIREFRAMING

Drawing on Paper Browsers :P

SKETCHING / WIREFRAMING

• Pocket Book

Moleskin

Etc.

• Always able to draw IDEAS

• “SAVING” visual data

SKETCHING / WIREFRAMING

Balsamiq Mockups

WRIT

ING T

HE

REQUIREMENTS

WRITING THE REQUIREMENTS

• User interaction written in one sentence

• User X fills out Form Y

• Site interaction

• Image X should flip to image Y after Y after 30

seconds

• Script X is called

WRITING THE REQUIREMENTS

• User registers to FACEBOOK• Best Case :• Correct mail, password security check, age Check• Spare the DB space.• More secure, more social …• Etc…

DESIGNIN

G

DESIGNING

Cooperation of all PROCESSES

Starting from top to bottom

Correct CANVAS size

Layout & Positioning

Guides & Grid

Designing Something KILLER

DESIGN

WORKING WITH A GRID AND GUIDES

IMPL

EMENTING

IMPLEMENTING

• Slicing the PSD to WEB optimated images

• Coding the template from scratch in one chosen

browser

• FINAL WORKING, Checking cross browser

functionality

• Separating code for different browsers.

• Doing UNIT tests.

• Checking all interactions

in any way

(from DOCUMENTATION)

THE END

THANK YOU FOR YOUR ATTENTION

APPENDIX

• RESSOURCES FOR DESIGNING:

• WWW.SMASHINGMAGAZINE.COM

• WWW.DEVIANTART.COM

• HTTP://PSD.TUTSPLUS.COM

• WWW.COLOURLOVERS.COM

• RESSOURCES FOR SKETCHING:

• WWW.GOMOCKINGBIRD.COM

• HTTP://WWW.NEUROSOFTWARE.RO/PROGRAMMING-BLOG/TAG/

SKETCHING-PAPER/.