WEBSITE CREATION PROCESS

FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION

WEBSITE CREATION PROCESS

FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION

PROJECTING, DESIGNING, DRAWING, FRONT-END DEVELOPMENT, PROGRAMMING, TESTING, FILLING WITH CONTENT, LAUNCHING OF

A

FROM THE CONCEPT AND THE PROTOTYPE TO THE COMPLETED SOLUTION

PROJECTING, DESIGNING, DRAWING, FRONT-END DEVELOPMENT, PROGRAMMING, TESTING, FILLING WITH CONTENT, LAUNCHING OF

A

RESPONSIVE WEBSITE

WEBSITE CREATION PROCESS

WHAT ISRESPONSIVE DESIGN?

MOBILE WEB

MOBILE WEB

HOW TO ALLOW EASY ACCESS TO THE CONTENT FROM MULTIPLE DEVICES?

RESPONSIVE DESIGN

RESPONSIVE DESIGN

1 Front-end

RESPONSIVE DESIGN

1 Front-end 1 Back-end

RESPONSIVE DESIGN

1 Front-endEasy access

to the content from any device

1 Back-end

ELEKS 4.0

ANALYSIS

DETERMINING

DETERMINING

Issues

DETERMINING

Issues

Tasks and goals

DETERMINING

Issues

Tasks and goals

User requirements

ELEKS’ OLD SITE

Issues:

ELEKS’ OLD SITE

Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style

ELEKS’ OLD SITE

Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style

Tasks and goals:

ELEKS’ OLD SITE

Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style

Tasks and goals:Increase of the website conversion

ELEKS’ OLD SITE

Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style

Tasks and goals:Increase of the website conversion

To present oneself as an innovative and progressive development companyTo demonstrate new products and services, etc.

ELEKS’ OLD SITE

Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style

Tasks and goals:Increase of the website conversion

To present oneself as an innovative and progressive development companyTo demonstrate new products and services, etc.

User requirements:

ELEKS’ OLD SITE

Issues:Complex navigationCharacterless among the competitors’ websitesDifferent from the new corporate style

Tasks and goals:Increase of the website conversion

To present oneself as an innovative and progressive development companyTo demonstrate new products and services, etc.

User requirements:To find out about the solutions offered by the companyTo find out more about the companyTo find out about the experience in working with certain industriesTo have a look at the testimonials of other companiesTo have a look at the completed works (Case Studies)

STARTING THE WORK

INFORMATIONAL ARCHITECTURE

THE WEBSITE STRUCTURE

THE WEBSITE STRUCTURE

Descending approach

THE WEBSITE STRUCTURE

Descending approach

THE WEBSITE STRUCTURE

Descending approach

Ascending approach

THE WEBSITE STRUCTURE

Descending approach

Ascending approach

MIX IT UP

PROTOTYPING

IDEA

CONCEPT

PROTOTYPE

IDEA

CONCEPT

PROTOTYPE

Every division is a separate

subsite

IDEA

CONCEPT

PROTOTYPE

Every division is a separate

subsite

A LEGO-like construction set

website

IDEA

CONCEPT

PROTOTYPE

Every division is a separate

subsite

A LEGO-like construction set

website

RAPID PROTOTYPING

RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY

HARDCORE!

RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY

HARDCORE!

Pen and paper

RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY

HARDCORE!

WhiteboardPen and paper

RAPID PROTOTYPINGNO DIGITAL! ONLY ANALOG! ONLY

HARDCORE!

WhiteboardPen and paper Stickers

DETAILING

PAPER PROTOTYPE

PAPER PROTOTYPE

DIGITAL PROTOTYPE

User testing

PAPER PROTOTYPE

DIGITAL PROTOTYPE

INTERACTIVE PROTOTYPE

User testing

User testing

PAPER PROTOTYPE

DIGITAL PROTOTYPE

INTERACTIVE PROTOTYPE

VISUAL DESIGN

User testing

User testing

User testing

PAPER PROTOTYPE

DIGITAL PROTOTYPE

INTERACTIVE PROTOTYPE

VISUAL DESIGN

User testing

PAPER PROTOTYPE

DIGITAL PROTOTYPE

INTERACTIVE PROTOTYPE

VISUAL DESIGN

DIGITAL PROTOTYPE

INTERACTIVE PROTOTYPE

VISUAL DESIGN

DIGITAL PROTOTYPE

VISUAL DESIGN

STARTING THE WORK

STARTING THE WORK

AGAIN...

REDESIGNING THE WEBSITE

AFTER 1,5 YEARS?

LET’S MAKE ITRESPONSIVE

ALL OVER AGAIN

TASKS AND DEMANDS

TASKS AND DEMANDS

Impression + Content

WOW

TASKS AND DEMANDS

Impression + Content

Content

WOW

PROTOTYPING

PROTOTYPINGAGAIN...

PROTOTYPINGAGAIN...

THIS TIME THRICE AS

MUCH!

DEVELOPMENT APPROACHES

DEVELOPMENT APPROACHES

MOBILE FIRST

DEVELOPMENT APPROACHES

MOBILE FIRST DESKTOP FIRST

PARALLEL PROTOTYPING

PARALLEL PROTOTYPINGTURNING ON THE 3D MODE OF THINKING

PARALLEL PROTOTYPINGTURNING ON THE 3D MODE OF THINKING

DESKTOP TABLET MOBILE

LET’S THINK IT THROUGH...

THINKING THROUGH

The responsiveness

THINKING THROUGH

The responsiveness

Transformation of the text

THINKING THROUGH

The responsiveness

Transformation of the text

Transformation of the graphics

THINKING THROUGH

The responsiveness

Transformation of the text

Transformation of the graphics

Degradation

DEFINING THE BREAKPOINTS

DEFINING THE BREAKPOINTS

DEFINING THE BREAKPOINTS

320px

480px

600px

950px

DEFINING THE BREAKPOINTS

320px

480px

600px

950px

DEFINING THE BREAKPOINTS

320px

480px

600px

950px

DEFINING THE BREAKPOINTS

320px

480px

600px

950px

DEFINING THE BREAKPOINTS

320px

480px

600px

950px

VISUAL DESIGN

BEFORE RUNNING PHOTOSHOP

BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals

BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals

Picturing the target audience

BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals

Picturing the target audience

Examining the work of others

BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals

Picturing the target audience

Examining the work of others

Determining the coloring of the

website

BEFORE RUNNING PHOTOSHOPReviewing our tasks and goals

Picturing the target audience

Examining the work of others

Determining the coloring of the

website

RUNNING PHOTOSHOP

MARKING UP THE GRID

MARKING UP THE GRID

Adjusting the grid to the content

MARKING UP THE GRID

Adjusting the grid to the content

NOT THE CONTENT TO THE GRID!

MARKING UP THE GRID

Adjusting the grid to the content

NOT THE CONTENT TO THE GRID!

MARKING UP THE GRID

Adjusting the grid to the content

NOT THE CONTENT TO THE GRID!

Modualrgrid.org

AND WHAT ABOUT THE

RESPONSIVENESS?

THERE ARE OPTIONS

THERE ARE OPTIONS

BUT IT ALL DEPENDS ON THE

CONTENT

950 – 24 col 620 – 16 col 460 – 12 col 310 – 8 col

COLORING

SKETCHING THE ELEMENTS

SKETCHING THE ELEMENTS

ADDING WEIGHT TO THE ELEMENTS

SKETCHING THE ELEMENTS

WORKING WITH THE TYPOGRAPHY

ADDING WEIGHT TO THE ELEMENTS

SKETCHING THE ELEMENTS

WORKING WITH THE TYPOGRAPHY

WORKING WITH THE GRAPHICS

ADDING WEIGHT TO THE ELEMENTS

SKETCHING THE ELEMENTS

WORKING WITH THE TYPOGRAPHY

WORKING WITH THE GRAPHICS

ADDING WEIGHT TO THE ELEMENTS

ELEMENTWISE APPROACH

CREATING A LIBRARY OF ELEMENTS

THAT’S NOT ENOUGH

NOW

FUNCTIONAL

FUNCTIONAL

RELIABLE

RELIABLE

CONVENIENT

FUNCTIONAL

PLEASING

FUNCTIONAL

RELIABLE

CONVENIENT

MAKING THE WEBSITE LIVELY

Feedback to every action

MAKING THE WEBSITE LIVELY

Feedback to every action

Hover/Active for all elements

MAKING THE WEBSITE LIVELY

Feedback to every action

Hover/Active for all elements

Animation of all elements

MAKING THE WEBSITE LIVELY

Feedback to every action

Hover/Active for all elements

Animation of all elements

Animation of the content when

needed

MAKING THE WEBSITE LIVELY

Feedback to every action

Hover/Active for all elements

Animation of all elements

Animation of the content when

needed

HTML5+CSS3

MAKING THE WEBSITE LIVELY

Feedback to every action

Hover/Active for all elements

Animation of all elements

Animation of the content when

needed

HTML5+CSS3

WATCH OUT NOT TO OVERDO IT

MAKING THE WEBSITE LIVELY

DEVELOPMENT

FRONT-END

BACK-END

FRONT-ENDStarting after the prototypes

Building HTML prototypes

Working with layers

BACK-END

FRONT-ENDStarting after the prototypes

Building HTML prototypes

Working with layers

BACK-ENDStarting the early development after the prototypes

Programming after the final design

Programming simultaneously with the front-end

development

TESTING

CONDUCTING

CONDUCTING

User testing

CONDUCTING

User testing

Browser testing

CONDUCTING

User testing

Browser testing

Back-end security testing

FILLING

WHAT WE NEEDForget Lorem Ipsum! Let’s write the filler text ourselves

Thinking through the adaptation of text and images already on the prototype stage

TAKING OFF AND FLYING HIGH

www.eleks.com